聚合物和高级css选择器使用polyfill下一个选择器

Question

我有一个我认为是高级用例的东西，它可能不适用于90%的用例，但这里是。

我有一些HTML（组件）标记，看起来像这个

<my-element>
  <div class="element1"></div> <!-- i am hidden -->
  <div class="element2"></div>
</my-element>

我的父元素负责设计它的子元素，所以我认为这没关系，因为你可以使用以下

polyfill-next-selector { content: ".element1" } 
::content .element1 { display: none; }

很好，现在当我的父元素获得一个新的类或属性时，我想做一些其他的事情。

<my-element class="showElement1">
    <div class="element1"></div> <!-- show me now -->
    <div class="element2"></div>
</my-element>
// Here is the confusing part
polyfill-next-selector { content: ".element1" } 
:host(.showElement1) ::content .element1 { display: block; }

在chrome中工作得很好，但polyfill在其他浏览器中会中断。

例如，我希望看到以下由polyfill呈现的CSS标记。

my-element.showElement1 .element1 { display: block; } 

但这并没有被创造出来。

我只是误解了：host和：：内容系统的工作方式，还是这是需要解决的polyfiller问题？

Answer 1

我被::content和content: ""弄糊涂了。他们的关系并不相同。

诀窍是知道代码的content: ""部分的内容就是polyfill读取并转换为最终CSS的内容。

polyfill-next-selector { content: ":host.showElement1 .element1" } 

成为：

my-element.showElement1 .element1

在不需要polyfill的浏览器中（即撰写本文时最新的chrome38）保持不变。即：

:host.showElement1 ::content .element1 {}

最后，为了让它正常工作，你需要把它放在一起，这样它读起来就像这个

polyfill-next-selector { content: ':host.showElement1 .element1'; }
:host(.showElement1) ::content .element1 {
  display: block;
}

发布作为参考答案，以防其他人可能对我面临的同样情况感到困惑。