为什么 :host 选择器只能在带有 platform.js 的 chrome 中工作？

关于如何设计 Web 组件的样式有很多讨论。

例如，http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/ http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/建议您可以使用 :host 标签来定位组件标签本身，而注入的样式表（例如 h1）应该将 h1 封装在组件的 Shadow dom 内。

这很棒，并且可以在 Chrome 中使用。

...但它只适用于镀铬。

在 Firefox 中访问上面的 url 不会显示任何精美的演示；事实上，它们根本不起作用。

So.

https://github.com/polymer/platform https://github.com/polymer/platform理论上是一个polyfill，可让您在不具备对所有所需功能的本机支持的浏览器中使用Web 组件。

理论上，这包括对 CSS 规则的一些有限支持，请参阅：http://www.polymer-project.org/platform/shadow-dom.html http://www.polymer-project.org/platform/shadow-dom.html

然而，实际上来说，这是行不通的。完全没有。

这里发生了什么？当您无法设置组件的样式?

我见过的最好的解决方案是要求组件模板有一个已知的根类节点：

<template>
  <style>
    .foo .bar {
       ...
    }     
  </style>
  <div class='foo'>
     ...
     <div class='bar'>Hi</div>
  </div>
</template>
<style>  
  .foo .bar { 
    ...
  }
</style> 

请注意，样式表在模板中都是重复的and在文档根上下文中；否则 firefox、safari 和 IE 样式将不起作用。

这真的是我们 Web 组件样式的水平吗？

我错过了什么吗？

看来真的是很多了much即使使用每个浏览器的最新版本，距离可用也比人们建议的要远得多。

这是我一直在玩的一支笔http://codepen.io/shadowmint/pen/iyFxE http://codepen.io/shadowmint/pen/iyFxE它使用 platform.js 0.3.4 并展示了它如何仅在 Chrome 中工作。

问题有点老了，但把这个答案放在这里以防你还没有弄清楚。

Shadow DOM polyfill 不会尝试在不支持的浏览器中进行样式封装或修复与 Shadow dom 相关的选择器。
这就是除了 :host/:content 选择器和 :host()/:host-context() 伪类不起作用之外，您会看到在 Shadow dom 中写入的样式的原因leaking到整个页面。

制作 :host 选择器的方式work(?)，是通过重写CSS规则并将:host替换为主机元素的标签名称。
如果您有 x 元素自定义元素，则如下所示：

:host {
  opacity: 0.4;
  transition: opacity 420ms ease-in-out;
}
:host(:hover) {
  opacity: 1;
}
:host(:active) {
  position: relative;
  top: 3px;
  left: 3px;
}
/*Convert it to*/

x-element {
  opacity: 0.4;
  transition: opacity 420ms ease-in-out;
}
x-element:hover {
  opacity: 1;
}
x-element:active {
  position: relative;
  top: 3px;
  left: 3px;
}

这就是聚合物的用途:内容选择器 https://www.polymer-project.org/1.0/docs/devguide/styling.html#styling-distributed-children-content即分布式子节点。

我同意存在代码重复，但我认为没有其他方法可以让 Firefox/IE/Safari 理解 :host 选择器的含义。
希望能帮助到你。