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

Question

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

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

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

...但它只适用于 chrome。

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

所以。

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

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

但是，实际上它不起作用。完全没有。

这里发生了什么？当您无法为您的组件设置样式时，我们怎么能认真地声称 platform.js polyfill 正在工作并支持旧版浏览器？

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

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

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

这真的是我们在 Web 组件样式方面所处的水平吗？

我错过了什么吗？

这似乎真的比人们建议的要远很多，即使使用每个浏览器的最新版本也是如此。

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

Answer 1

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

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

使 :host 选择器工作(?) 的方法是重写 css 规则并将 :host 替换为主机元素的标记名称。
如果你有一个 x-element 自定义元素，那么就像这样：

: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;
}

这就是聚合物对:content selectors 的作用，即分布式子节点。

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