Пользовательский элемент JS получает внутренний HTML

Существует набор правил о том, что можно и что нельзя делать в конструкторе веб-компонента. Они ниже.

Но подумайте об этом:

Компонент может быть создан одним из трех способов:

1. Часть исходной страницы/использование innerHTML: Когда браузер загружает страницу или при использовании innerHTML, вы можете добавлять атрибуты и дочерние элементы к компоненту как часть загрузки страницы или часть innerHTML.

parent.innerHTML = '<super-hero name = "Thor"><super-weapon value = "Mjolnir"></super-weapon></super-hero>'.

2. Вы можете вызвать document.createELement, чтобы создать элемент. Вы не можете добавлять атрибуты или дочерние элементы до тех пор, пока элемент не будет создан.

let superHero = document.createElement('super-hero');
let superWeapon = document.createElement('super-weapon');
superHero.setAttribute('name', 'Thor');
superWeapon.setAttribute('value',  'Mjolnir');
superHero.appendChild(superWeapon);
parent.appendChild(superHero)

3. Вы можете создать экземпляр объекта, используя new. Как и document.createElement, вы должны дождаться создания элемента, прежде чем добавлять атрибуты и дочерние элементы.

let superHero = new SuperHero();
let superWeapon = new SuperWeapon();
superHero.setAttribute('name', 'Thor');
superWeapon.setAttribute('value',  'Mjolnir');
superHero.appendChild(superWeapon);
parent.appendChild(superHero)

Как только компонент создан, он добавляется в DOM, и именно тогда вызывается connectedCallback вашего компонента.

И все эти три способа на самом деле сводятся к созданию экземпляров с помощью new. document.createElement вызывает CustomElementRegistry.get, чтобы получить конструктор для этого элемента, а затем использует new для создания объекта.

И innerHTML анализирует HTML, а затем либо вызывает document.createElement, либо использует new для создания объекта.

Но при этом НЕТ атрибутов или дочерних элементов, когда вызывается конструктор для вашего элемента. На самом деле, при вызове connectedCallback может не быть дочерних элементов или атрибутов. Это одна из причин, по которой observedAttributes и attributeChangedCallback были добавлены в спецификацию.

Единственное, чего не хватает в спецификации, это знать, что кто-то добавил или изменил дочерние элементы до или после того, как компонент был добавлен в DOM. Но если вы действительно хотите знать, когда меняются дети, вы можете использовать MutationObserver.

Вот почему в вашем конструкторе нет дочерних элементов или атрибутов. Они еще не добавлены.

Теперь о правилах:

When authoring custom element constructors, authors are bound by the following conformance requirements:

• A parameter-less call to super() must be the first statement in the constructor body, to establish the correct prototype chain and this value before any further code is run.

• A return statement must not appear anywhere inside the constructor body, unless it is a simple early-return (return or return this).

• The constructor must not use the document.write() or document.open() methods.

• The element's attributes and children must not be inspected, as in the non-upgrade case none will be present, and relying on upgrades makes the element less usable.

• The element must not gain any attributes or children, as this violates the expectations of consumers who use the createElement or createElementNS methods.

• In general, work should be deferred to connectedCallback as much as possible—especially work involving fetching resources or rendering. However, note that connectedCallback can be called more than once, so any initialization work that is truly one-time will need a guard to prevent it from running twice.

• In general, the constructor should be used to set up initial state and default values, and to set up event listeners and possibly a shadow root.

Several of these requirements are checked during element creation, either directly or indirectly, and failing to follow them will result in a custom element that cannot be instantiated by the parser or DOM APIs.

Есть 2 способа.

1. Вы можете определить пользовательский элемент после window.onload, и все должно работать нормально.

window.addEventListener('load', () => {
    customElement.define('my-button', MyButton);
});

2. установить атрибут defer в <script>

<script defer src = "my-button.js"></script>

Если вам нужен надежный доступ к дочерним элементам вашего пользовательского элемента, независимо от того, как сценарий вашего пользовательского элемента размещен в документе, это для вас: https://github.com/WebReflection/html-parsed-элемент

Удивительно сложно определить, когда синтаксический анализатор проанализировал дочерние элементы пользовательского элемента; HTMLParsedElement делает это, многократно проверяя, существует ли nextSibling (что означало бы, что синтаксический анализ текущего элемента выполнен). Текущая реализация заменила эту проверку наблюдателем мутаций, который проверяет childList и subtree изменения в родительском элементе пользовательского элемента.