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>

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

Answer 2

如果您创建一个组件<a-component>，那么它有自己的标记（它的模板），它是本地DOM。该模板可以包含<content></content>个标签（一个未命名和多个命名的标签），其中包含子项。作为孩子添加的内容显示在轻量级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>

然后{DOM}中显示<div>C</div>。然后，浏览器中生成的DOM看起来像

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

当从<div>A</div>内部看到<div>B</div>和<a-component>以及从组件外部看到的阴影或阴影DOM时<div>C</div>被称为<a-component> <div>C</div> </a-component>光DOM。

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

<div>C</div>

您会看到<div>A</div>是由组件的用户直接添加的，而<div>B</div>和<a-component>是隐藏的（在阴影中），只有在{{1}}出现时才会显示由浏览器处理。

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

聚合物：Light DOM vs Local DOM

2 个答案: