Question

我试图围绕轻量级DOM和影子DOM概念。

我在这里要做的是如何在阴影dom中移动光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被抛入了光dom（并由.foo设计），<my-element></my-element>被放入了shadow DOM中。

但是，我怎么能把div放在阴影dom里呢？（实际上将其隐藏起来.foo）

编辑：一个更真实的例子就是

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

从我现在的理解，实质上我将在这里制作2个自定义组件。

所以，一个用于卡，导入卡然而，H3和P将始终采用它所放置的页面的默认样式？（如果没有被覆盖......）

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

插入

我意识到我可以这样做，但我想知道这是否可行。

Answer 1

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