如何设置样式:基于自定义元素属性的根

时间:2018-09-03 18:40:16

标签: css html5 web-component styling custom-element

更新:请参阅:How to style :root without !important using proper specificity

不可能吗?

此样式规则被完全忽略

1 个答案:

答案 0 :(得分:1)

您忘记了:host()的括号:

elem.attachShadow({mode: 'open'})
    .innerHTML = `
    <style>
      :host([player="X"]) { 
        display: inline-block;
        background: red;
        padding 1em; 
      }
    </style>
    Hello World`
<game-toes id=elem player="X"></game-toes>