如何防止元素被轻量级 DOM 样式设置样式？答案

【问题标题】：How can I prevent an element from being styled by light DOM styling?如何防止元素被轻量级 DOM 样式设置样式？
【发布时间】：2014-08-28 16:11:54
【问题描述】：

我正试图围绕 light DOM 和 shadow DOM 概念展开思考。

我想在这里做的是如何在阴影 dom 内移动 light dom 部分，这样它就不会被 .foo 选择器设置样式...

我知道了

<polymer-element name="my-element" constructor="" attributes="" noscript>
  <template>
    - <content></content> -
  </template>
</polymer-element>

我的元素是这样使用的：

<my-element>
    <div class="foo">Shadow</div>
</my-element>

现在我的理解是，my-element 中的 div 被扔进了 light dom（并被 .foo 设置样式），而 <my-element></my-element> 被放入了 shadow DOM 中。

但是，我怎样才能将 div 也放入 shadow dom 中呢？（实际上是从 .foo 中隐藏它）

编辑：更真实的例子是

<cards>
   <card>
     <h3>Title</h3>
     <p>Body</p>
   <card>
<cards>

根据我现在的理解，本质上我会在这里制作 2 个自定义组件。

所以，一个用于 cards，它导入 card 但是，H3 和 P 将始终采用其所在页面的默认样式？（如果没有被覆盖...）

我需要制作另一个自定义组件吗？因此，我创建 card-title 而不是 H3，而 p 将由 <content></content> 插入

我知道我可以那样做，但我想知道这是否可行。

【问题讨论】：

不要添加类.foo？确实，Light DOM 的重点在于它应该在元素用户的控制之下（同时仍然允许从组件内部访问它）。如果样式突然不适用于某些元素，并且如果不深入研究自定义元素源代码就无法找出原因，这会破坏 Web 组件带来的所需封装和关注点分离。
如果您希望 Light DOM 元素纯粹是一个 API 参数并且完全不可设置样式，请使用 <option> 或 <source> 标签而不是 <div>，例如 <select> 和<video> 做，分别。
那我可能想错了。你能检查我的编辑，看看我是否在正确的轨道上？谢谢！！
伟大的编辑！我没有直接的答案给你，但看起来你走在正确的道路上。两件事：如果有需要附加到它们的 JS 行为，只为 <cards> 和 <card> 创建自定义组件。例如，如果您只需要<cards> 知道要消费哪个孩子，只需将card 属性放在一对夫妇孩子divs 上（如core-drawer-panel）。然后，您可以将<content> 的select 属性与CSS 属性选择器一起使用（例如<content select="[card]">）。
This answer 也可能有用。

【解决方案1】：

您可以使用::content 选择器尝试覆盖页面可能已应用的任何样式：http://jsbin.com/muyapu/2/edit

或者您可以使用new all property to reset styles，但它仅在 Chrome 和 Firefox 中受支持。 http://jsbin.com/daxaf/2/edit

【讨论】：