dom - polymer : Light DOM vs Local DOM

Question

Polymer的light DOM和local DOM有什么区别？来自文档(1):

The DOM that an element creates and manages is called its local DOM. This is distinct from the element's children which are sometimes called its light DOM for clarity.

这似乎没有多大帮助。轻量 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。当您使用自定义元素时，您将其作为子元素放置在light dom中。因此，本地 dom 由元素的创建者决定，而 light dom 由元素的用户设置。当然，当您创建和使用自己的自定义元素时，您可以灵活地选择将什么放在哪里。