聚合物:Light DOM vs Local DOM

Question

Polymer的轻DOM和本地DOM有什么区别？从文档(1):

元素创建和管理的DOM称为其本地DOM.这与元素的子元素不同,为了清楚起见,有时将其称为轻DOM.

这似乎没什么帮助.是不是轻量级DOM应该包含子项,如果是这样,本地DOM包含什么？

[1] https://www.polymer-project.org/1.0/docs/devguide/local-dom

Answer 1

这是一个解释差异的例子.假设您有以下自定义元素:

<dom-module id="x-foo">

  <template>
    <div>I am local dom</div>
    <content></content>
  </template>

  <script>
    Polymer({
      is: 'x-foo'
    });
  </script>

</dom-module>

你在文档中使用它:

<x-foo>I am light dom</x-foo>

你放入元素模板的是本地dom.当您使用自定义元素时,您将其作为子元素添加到光源中.因此,本地dom由元素的创建者决定,而light dom由元素的用户设置.当然,当您同时创建和使用自己的自定义元素时,您可以灵活地放置在哪里.

Answer 2

如果您创建一个组件<a-component>,那么它有自己的标记(它的模板),它是本地DOM.模板可以包含<content></content>投影子项的标记(一个未命名的和多个命名的标记).作为孩子添加的内容显示在light DOM中.

当我们有一个<a-component>本地DOM

<dom-module id="a-component">
  <template>
    <div>A</div> 
    <content></content>
    <div>B</div>
  </template>
</dom-module> 

我们就像使用它一样

<a-component>
  <div>C</div>
</a-component>

然后<div>C</div>在light DOM中显示.然后在浏览器中生成的DOM看起来像

    <div>A</div> 
    <div>C</div>
    <div>B</div>

其中<div>A</div>和<div>B</div>从内部观察时被称为本地DOM <a-component>和从组件的外侧看时和背阴或阴影DOM <div>C</div>是在光DOM.

如果我们再次使用此标记,我们将添加到页面

<a-component>
  <div>C</div>
</a-component>

您会看到<div>C</div>组件的用户直接添加该组件<div>A</div>并将<div>B</div>其隐藏(在阴影中),并且仅在稍后<a-component>由浏览器处理时显示.

阴影和阴影的区别在于是否为Polymer启用了完全阴影DOM.Shady在某种程度上模仿阴影,但有一些显着的差异,这就是为什么它有一个不同的名称.