Я новичок в javascript и играл с веб-компонентами. Я хотел получить доступ к атрибуту цвета CSS элемента внутри теневой DOM веб-компонента. Когда я использую метод getComputedStyle (), я не могу получить доступ к свойству стиля при его запуске в connectedCallback.
Здесь я пытаюсь получить доступ к свойству цвета, при регистрации значения на консоли он показывает RGB (0, 0, 0), тогда как после ожидания миллисекунды и затем регистрации отображается правильное значение RGB (0, 128, 0). вверх. Почему это происходит?
Я полагаю, это потому, что стили еще не были вычислены, когда я впервые запускаю функцию? Какое решение может быть более элегантным? Как я могу дождаться, пока будут вычислены стили для запуска моей функции, вместо некоторого произвольного времени, которое я указываю сейчас?
JS
document.addEventListener('DOMContentLoaded',()=>{
class CustomComponent extends HTMLElement{
constructor(){
super();
this.attachShadow({mode:'open'});
const template=document.querySelector('#component');
this.shadowRoot.appendChild(template.content.cloneNode(true));
};
connectedCallback(){
console.log('Element added to DOM');
let text=this.shadowRoot.querySelector('.text');
console.log(getComputedStyle(text).getPropertyValue('color'));
setTimeout(()=>{console.log(getComputedStyle(text).getPropertyValue('color'))},1)
};
};
customElements.define('custom-component',CustomComponent);
});
CSS
.container{
--color-variable:#f2c846;
}
.text{
color:green;
}
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Random title</title>
<script src='./CustomComponent.js'></script>
</head>
<body>
<template id='component'>
<link rel='stylesheet' href='./CustomComponent.css'/>
<div class=container>
<div class='text'>
Colored Text
</div>
</div>
</template>
<custom-component>
</custom-component>
</body>
</html>
