css - 使用 polyfill-next-selector 的 polymer 和高级 css 选择器

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 和::content 系统的工作方式，或者这是一个需要解决的 polyfiller 错误？

Answer 1

我对 ::content 和 content: "" 感到困惑。它们没有相同的关系。

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

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

变成:

my-element.showElement1 .element1

并且在不需要 polyfill 的浏览器中(即在撰写本文时最新的 chrome 38)保持不变。即:

:host.showElement1 ::content .element1 {}

最后，为了让它正常工作，你需要把它们放在一起，所以它看起来像这样

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

作为引用答案发布，以防其他人可能对我遇到的相同情况感到困惑。