Failed to construct CustomElement

Question

I get an issue using custom elements.

Error : Uncaught DOMException: Failed to construct 'CustomElement': The result must not have children

'use strict';

class TestCard extends HTMLDivElement {

  constructor() {
    super();
    this.headerNode = document.createElement('div');
    this.bodyNode = document.createElement('div');
    this.headerNode.className = 'card__header';
    this.bodyNode.className = 'card__body';
    this.appendChild(this.headerNode);
    this.appendChild(this.bodyNode);
  }

  connectedCallback() {
    this.classList.add('card');
  }

  static get observedAttributes() {
    return ['data-header', 'data-body'];
  }

  attributeChangedCallback(attrName, oldValue, newValue) {
    if (newValue !== oldValue) {
      this[attrName.replace('data-', '')] = newValue;
    }
  }

  set header(value) {
    this.headerNode.textContent = value;
    this.setAttribute('data-header', value);
  }

  set body(value) {
    this.bodyNode.innerHTML = value;
    this.setAttribute('data-body', value);
  }
}

customElements.define('test-card', TestCard, {
  extends: 'div'
});

<div is="test-card" data-header="Title" data-body="Content"></div>

Creating the WebComponent :

var cardNode = document.createElement('div');
cardNode.setAttribute('is', 'test-card');
cardNode.header = header;
cardNode.body = body;

Answer 1

Some things are not allowed in a custom element's constructor. For more info on this check an older answer by me to a similar question).

Amongst others, those are:

• accessing attributes (especially writing attributes, this includes class which is considered under control of the person consuming your component)
• accessing children (neither read nor write)
  • unless you do that in the component's shadow tree.

To achieve what you want to do, use shadow DOM:

class TestComp extends HTMLElement {
  headerNode = document.createElement('div');
  bodyNode = document.createElement('div');
  
  constructor() {
    super();
    this.attachShadow({mode: 'open'});
    this.headerNode.className = 'card__header';
    this.bodyNode.className = 'card__body';
    this.bodyNode.part = 'body';
    this.shadowRoot.append(this.headerNode, this.bodyNode);
  }
  
  connectedCallback() {
    this.classList.add('card');
  }

  static get observedAttributes() {
    return ['data-header', 'data-body'];
  }

  attributeChangedCallback(attrName, oldValue, newValue) {
    if (newValue !== oldValue) {
      this[attrName.replace('data-', '')] = newValue;
    }
  }

  set header(value) {
    this.headerNode.textContent = value;
    this.dataset.header = value;
  }

  set body(value) {
    this.bodyNode.innerHTML = value;
    this.dataset.body = value;
  }
}

customElements.define('test-comp', TestComp);

let newTestComp = new TestComp();
newTestComp.header = 'FOOO';
newTestComp.body = '<ul><li><i>BA</i><b>AA</b>R</ul>';
document.body.append(newTestComp);

test-comp::part(body) { color: green; }

<test-comp data-header="Titre de ma carte" data-body="<h1>Test</h1>"></test-comp>

Be aware that using shadow DOM means outside styles won't affect the styling of elements in the shadow tree. To apply styles to those, create a <style> element in the constructor, set it's textContent property to your styles, and append that next to your other elements in the shadow DOM.

Instead of using a style element, you can also use Constructable Stylesheets. You'll probably need a polyfill because so far Chromium-based browsers are the only ones supporting it, but support is coming in other browsers (Firefox has had it for a while behind a flag: Open new tab, navigate to about:config and then set layout.css.constructable-stylesheets.enabled to true).

To allow styling the component's inside from outside CSS, you can specify which elements are allowed to by styled from the outside using the part="name" attribute in your shadow DOM and then style it using the ::part(name) selector in CSS. Added that into the code example.

Answer 2

I cannot say about the error that you mentioned but there is one more thing which you should change.

Reorder these things in your code from

constructor() {
    super();
    this.classList.add('card');
    this.headerNode = this.getElementsByClassName('card__header')[0];
    this.bodyNode = this.getElementsByClassName('card__body')[0];
    this.innerHTML = `<div class="card__header"></div>
                      <div class="card__body"></div>`;
  }

to

constructor() {
    super();
    this.classList.add('card');
    this.innerHTML = `<div class="card__header"></div>
                      <div class="card__body"></div>`;
    this.headerNode = this.getElementsByClassName('card__header')[0];
    this.bodyNode = this.getElementsByClassName('card__body')[0];

  }

Since you are adding the element with classes card__header and card__body later in the code, And you are trying to access it that is why this.headerNode is undefined.

Answer 3

As I commented in Connexo his older answer.
You have to understand the Web Components lifecycle: https://andyogo.github.io/custom-element-reactions-diagram/

When you run new TestComp() or document.createElement("test-comp")
there is NO DOM Element, only the constructor runs, and tells you,
you can't add DOM (children) to it (nothing). Only in the connectedCallback can you work with existing DOM, anything inside or after your <test-comp> might not exist yet; see: wait for Element Upgrade in connectedCallback: FireFox and Chromium differences

And please optimize that constructor,
any blog or answer showing this.shadowRoot inside the constructor should be burned

  constructor() {
    super() // sets AND returns "this" scope
     .attachShadow({mode:'open'}) // sets AND returns shadowRoot
     .append(
        this.headerNode = document.createElement('div'),
        this.bodyNode = document.createElement('div')
     );
    this.headerNode.className = 'card__header';
    this.bodyNode.className = 'card__body';
  }