Search code examples
dompolymerweb-component

Polymer : Light DOM vs Local DOM

What is the difference between Polymer's light DOM and local DOM? From the docs(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.

This doesn't seem to help much. Isn't the light DOM supposed to contain the children and if so what does the local DOM contain?

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

Solution

  • Here's an example to explain the difference. Suppose you have the following custom element:

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

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

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

</dom-module>

    And you use it like this in your document:

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

    What ever you put into the template of the element is local dom. What you put as children to your custom element when you use it is light dom. So, the local dom is determined by the creator of the element, while the light dom is set by the user of the element. Of course, when you both create and use your own custom elements you have some flexibility what to put where.