Lit-element: Why Lit-Element renders many empty html comments into shadow DOM trees?

Created on 6 Oct 2018 · 3Comments · Source: Polymer/lit-element

Description

There are many empty html comments In shadow DOM tree that are not written by me.
why

Live Demo

https://stackblitz.com/edit/lit-element-example?file=index.js

https://glitch.com/edit/#!/hello-lit-element?path=index.html:1:0

Sorry it is not a live.
https://github.com/march23hare/lit-elem-todo

Steps to Reproduce

Expected Results

no empty html comments

Actual Results

many empty comments

Browsers Affected

[X] Chrome
[X] Firefox
[X] Edge
[ ] Safari 11
[ ] Safari 10
[ ] IE 11

Versions

lit-element: v0.6.2
webcomponents: v2.0.0

Source

march23hare

👍2

Most helpful comment

Lit-html uses them to keep track of its expression/parts locations, so it can update efficiently, consider the following example:

code:

class DemoEl extends LitElement {
  static get properties() {
    return {
      myString: String
    };
  }
  constructor(){
    super();
    this.myString = 'bar';
  }

  render() {
    const { myString } = this;
    return html`
      <h1>foo</h1>
      <h1>${myString}</h1>`; // will wrap `${myString}` with <!---> 
  }
}

output:

<demo-el>
  #shadow-root (open)
    <!---->
    <h1>foo</h1>
    <h1>
      <!---->
      "bar"
      <!---->
    </h1>
    <!---->
</demo-el>

You can see more here: https://github.com/Polymer/lit-html/blob/14f7e67b1a325946030aff031d4518c4a9e54ff2/src/lib/template.ts

There'll probably (hopefully) be more documentation on this when the docs are released.

thepassle on 6 Oct 2018

👍5 👀1

All 3 comments

Lit-html uses them to keep track of its expression/parts locations, so it can update efficiently, consider the following example:

code:

class DemoEl extends LitElement {
  static get properties() {
    return {
      myString: String
    };
  }
  constructor(){
    super();
    this.myString = 'bar';
  }

  render() {
    const { myString } = this;
    return html`
      <h1>foo</h1>
      <h1>${myString}</h1>`; // will wrap `${myString}` with <!---> 
  }
}

output:

<demo-el>
  #shadow-root (open)
    <!---->
    <h1>foo</h1>
    <h1>
      <!---->
      "bar"
      <!---->
    </h1>
    <!---->
</demo-el>

You can see more here: https://github.com/Polymer/lit-html/blob/14f7e67b1a325946030aff031d4518c4a9e54ff2/src/lib/template.ts

There'll probably (hopefully) be more documentation on this when the docs are released.

thepassle on 6 Oct 2018

👍5 👀1

Thank you!
Thank you so much!

march23hare on 7 Oct 2018

Can anyone provide an explanation on why exactly comments are used?

Why not some custom node property, like __lit__?\
For example, if it exists on a node - it needs to be tracked.

Even if we talk about a collection of nodes, they could be marked by some incremented id, like node.__lit__.id (or even directly in __lit__ property) to distinguish between them.

This would also simplify detection of said nodes for third-party DOM libraries, if some lit-element-specific functionality needs to be implemented.