如何根据自定义元素属性设置样式：root

【问题标题】：How to style :root based on Custom Element Attribute如何根据自定义元素属性设置样式：root
【发布时间】：2018-09-03 18:40:15
【问题描述】：

更新：见：How to style :root without !important using proper specificity

不可能吗？

此样式规则完全被忽略

【问题讨论】：

有人说截图不是最好的分享代码...
它在一个视图中显示所有生命体征（尤其是#shadow-root）。自定义元素是使用来自不同文件的代码创建的。发布零件就像倾倒7块拼图让人们弄清楚
请阅读images of code 了解为什么不喜欢此类屏幕截图。 7个拼图也不好，这就是为什么我们要求MCVE

标签： css html web-component styling custom-element

【解决方案1】：

你忘记了:host()的括号：

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

&lt;game-toes id=elem player="X"&gt;&lt;/game-toes&gt;

【讨论】：

+1 这确实是手头的问题；但正如我的问题中更新的那样，不是我应该发布的问题