1

我对javascript相当陌生，并且一直在玩网络组件。我想访问 web 组件的 shadow DOM 中元素的 CSS color 属性。当我使用 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>
4

1 回答 1

0

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

我认为将第二个参数setTimeout(callback)视为多余的信号在这种情况下视为您正在等待事件循环运行一次（从而允许计算样式）的信号并不罕见。 可能还有一个额外的优势，即表明您也在等待一些视觉准备，尽管它不会为此目的而表现出色。我将是第一个说我没有发现这些解决方案像内置回调或要监听的事件那样令人满意的解决方案，我会假设是那件事。requestAnimationFrame(callback)setTimeoutconnectedCallback

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

于 2020-07-23T20:45:02.467 回答