无法在 webcomponent 的 connectedCallback 中使用 getComputedStyle 访问样式

Question

我是 javascript 的新手，一直在玩网络组件。我想访问网络组件阴影 DOM 内元素的 CSS 颜色属性。当我使用 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>

Answer 1

哎呀，令人沮丧。我认为您在这里的直觉可能是正确的，因为样式没有立即准备好，您等待的本能也是我可能会接受的。

我认为看到 setTimeout(callback) 并不罕见——在这种情况下 second argument 是多余的——作为你正在等待事件循环到 [=22= 的信号] 一次（因此允许样式计算）。 requestAnimationFrame(callback) 可能还有一个额外的优势，即表示您也在等待一些视觉准备就绪，尽管在这个目的上它不会优于 setTimeout。我会第一个说，我发现这些解决方案不如要监听的内置回调或事件那样令人满意，我会假设 connectedCallback 就是那样。

此外，如果您不介意使用有助于使用 Web 组件的框架（如 Stencil），框架会提供回调，让您知道组件何时完全呈现.

无法在 webcomponent 的 connectedCallback 中使用 getComputedStyle 访问样式

unable to access styles with getComputedStyle in connectedCallback of webcomponent

javascript

web-component

shadow-dom

getcomputedstyle