Веб-компоненты

Сложные параметры

В рамках небольшого эксперимента, внутри компонента были размещёны другие элементы, которые рассматривались как параметр. Например:

<my-test-card>
    <var id="some-prop">some-value</var>
    <template id="main">Welcome, <slot name="name"/>!</template>
</my-test-card>

В целом, получить к ним доступ и использовать внутри компонента не составило труда. Хотя такое использование сложно назвать динамическим, возможно придётся использовать MutationObserver для отслеживания изменений внутри компонента.

class MyTestCard extends HTMLElement {
	connectedCallback() {
		const var1 = this.querySelector("var#some-prop");
		const template = this.querySelector("template#main");

		const shadow = this.attachShadow({ mode: "open" });
		shadow.appendChild(template.content);
        ...
	}
}