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

在不需要填充物的浏览器中（即在编写时最新的chrome 38）保持不变。即：

:host.showElement1 ::content .element1 {}

最后，为了使其正常工作，您需要将它们保持在一起，以便它像这样读取

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

张贴作为参考的答案，以防有其他人可能因我遇到的情况而感到困惑。

使用polyfill-next-selector的聚合物和高级css选择器

1 个答案: