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样式不起作用。

这真的是我们在网络组件样式方面的水平吗？

我错过了什么吗？

即使使用每个浏览器的最新版本，这似乎还远远超出了人们的建议。

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

Answer 1

问题有点陈旧，但请将此答案放在此处，以防您尚未弄明白。

Shadom DOM polyfill不会在不支持的浏览器中尝试样式封装或修复与shadom dom相关的选择器。
这是除了：host /：内容选择器和：host（）/：host-context（）伪类不起作用之外的原因，你会看到写在阴影dom 泄漏内的样式在整个页面上。

你可以做出的方式：主机选择器工作（？），是通过重写css规则并用主机元素的标签名替换：host。如果你有一个x元素自定义元素，那么像这样：

＆＃13;

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

＆＃13;

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

我同意代码重复，但我没有其他方式可以让Firefox / IE / Safari了解：主机选择器的含义。
希望它有所帮助。

为什么：host选择器仅在带有platform.js的chrome中工作？

1 个答案: