Web Components innerHTML and loading time

Tue, 30 Jan 2024 00:00:00 +0000

While approaching the first lessons of Rob Eisenberg’s Web Components course, I stumpled upon a browser error that prevented every instance of a web component to run:

Failed to construct 'CustomElement': The result must not have children"

After many trials and errors, it turned out that adding the type="module" attribute fixed the issue. But why? I asked Rob directly in this tweet, and here’s his answer:

Technically, one shouldn’t alter the host attributes or children in the constructor (there’s a note on attributes but not children in the lesson; I’ll add more on that). Though, it will work in certain scenarios. Setting innerHTML in the constructor is an example of where it will work, depending on the timing.

Javascript on Duma's website

Web Components innerHTML and loading time