How to access content text in HTML Custom Element?

Question

When creating an HTML custom element with a JSON string embedded by the user (though the type of string is not relevant here) ...

<my-elem>
  { "some":"content" }
</my-elem>

I would like to JSON.parse it like this ...

class MyElement extends HTMLElement {
    constructor() {
        super();
        this.root = this.attachShadow({ mode:'open' });
        this.root.appendChild(template.content.cloneNode(true));
    }
    connectedCallback() {
        JSON.parse(this.innerHTML);
    }
}
customElements.define('my-elem', MyElement);

const template = document.createElement('template');
template.innerHTML =  `irrelevant`;

... and get a perfect result with Firefox v.63.

But running this with Chrome v.71 I get

Uncaught SyntaxError: Unexpected end of JSON input

due to this.innerHTML returning an empty string.

I also tried other DOM methods to access the textual content, but all of them failed also.

Now I'm rather clueless, how to get this to work with Chrome.

Btw: Using <slot> is of no help, since I do not want to render the textual content ... only access it for parsing.

Resolved:

• Put the template definition before the class definition.
• Ensure having the script defining the custom element inserted behind all custom element instances in the HTML document.

Answer 1

Why not make it more flexible and support both a src attribute and a data property?

class MyElement extends HTMLElement {
  static get observedAttributes() {
    return ['src'];
  }

  constructor() {
    super();
    this.attachShadow({ mode:'open' });
    this._data = {
      name: '',
      address: ''
    };
  }

  attributeChangedCallback(attrName, oldVal, newVal) {
    if (oldVal !== newVal) {
      const el = this;
      fetch(newVal).then(resp => resp.json()).then(
        data => {
          el._data = data;
          el.render();
        }
      );
    }
  }

  render() {
    this.shadowRoot.innerHTML = `
    <div>
      <div>${this._data.name}</div>
      <div>${this._data.address}</div>
    </div>`;
  }

  set address(val) {
    this._data.address = val;
    this.render();
  }
  
  set name(val) {
    this._data.name = val;
    this.render();
  }
}

customElements.define('my-elem', MyElement);


setTimeout(() => {
  let el = document.querySelector('my-elem');
  el.name = 'The Joker';
  el.address = 'Gothem';

  setTimeout(() => {
    el.setAttribute('src', 'data:application/json,%7B%22name%22:%22Thanos%22,%22address%22:%22Titan%22%7D')
  }, 1500);
}, 1500);

<my-elem src="data:application/json,%7B%22name%22:%22Darth%20Vader%22,%22address%22:%22Death%20Star%22%7D"></my-elem>

The advantage to using a src attribute is that you can pass in JSON or you can pass in a URL that will return the JSON.

The properties allow you to change individual values in your DOM.

Changing the entire innerHTML may not be the right thing to do, but with small amounts of DOM it could be. You can also change individual values on the DOM or use something like LitHtml.

Answer 2

You should wait for the content to be present.

In most cases a simple delay could resolve the problem:

connectedCallback() {
    setTimeout( () => JSON.parse(this.innerHTML) )
}

Alternatly, actually <slot> could help with the slotchange event. You can hide the rendering or remove the content if you don't want it.