Question

我最近编写了一个Web组件，现在尝试为其他不受支持的浏览器添加webcomponentsjs polyfills，但是当我使用它时我遇到了问题。

我必须得到一个动态更改的childNodes样式表css规则，这里的代码在chrome中工作正常：

        node = this['root'].childNodes;
        //this['root']: is <template> element
        //Here is webcomponentjs console.log in Firefox:
        //Object
        // { __impl4cf1e782hg__: <template#sd>,
        //          parentNode_: undefined, firstChild_: undefined, 
        //          lastChild_: undefined, nextSibling_: undefined, 
        //          previousSibling_: undefined, treeScope_: Object }

        style = node[1]['sheet'].cssRules;

        if(bgColor || hairColor){
            for(i = 0; i < style.length; i++){
                if(style[i].selectorText === '.base'){
                    style[i].style.background = bgColor;
                }
                if(style[i].selectorText === '.hair'
                   || style[i].selectorText === '.hair::before'
                   || style[i].selectorText === '.hair::after' ){
                    style[i].style.background = hairColor;
                }
           }
        }

问题是我无法访问firefox和safari中的webcomponentsjs中的node[1]['sheet'].cssRules，因为它位于另一个层Object { __impl4cf1e782hg__: <template> ... }内，尽管我进入了它{{1}但是我不允许得到任何东西。如何为webcomponentsjs更改此代码？

问题是，我怎样才能获得cssRules？

我无法看到有关在其网站上获取工作表的任何信息。有什么想法吗？

谢谢。

Answer 1

无论您是否使用Shadow DOM，方法都是不同的。

访问polyfilled Shadow DOM中的sheet的方法是使用setTimeout()方法中的attachedCallback()函数，因为只有在那个时刻之后样式表才可用。< / p>

prototype.attachedCallback = function ()
{
    var style = this.shadowRoot.querySelector( 'style' )

    setTimeout( function () 
    { 
        var sheet = style.sheet
        console.info( 'sheet is ok =>', sheet )
        //you can modify styles here:
        sheet.cssRules[0].style.color = 'dodgerblue'
    } )
}

如何使用webcomponent.js获取StyleSheet css规则

1 个答案: