JavaScript ShadowRoot.innerHTML — розмітка тіньового дерева

Властивість innerHTML задає розмітку всередині тіні — разом зі стилями.

правити

Загальний опис

Найшвидший спосіб наповнити компонент: пишеш і <style>, і розмітку одним рядком. Стиль усередині діє лише тут — назовні він не витече, а зовнішні класи не проникнуть усередину.

Але це той самий innerHTML, з тими самими ризиками: дані від користувача сюди класти не можна. Тінь ізолює стилі, а не безпеку — скрипт із чужого рядка виконається так само.

Для складніших компонентів беруть <template> і клонують його вміст — це швидше й не змушує браузер щоразу розбирати рядок.

правити

Нотатка

Ізоляція стилів — не ізоляція безпеки. XSS через shadowRoot.innerHTML працює так само, як і через звичайний.

автор: NagarD правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
innerHTML	53+	63+	10+	40+	79+	-

Підтримка: мобільні переглядачі

Переглядач
innerHTML	53+	yes	yes	10+

Приклади

+ запропонувати свій приклад у пісочниці

class MyCard extends HTMLElement {
    connectedCallback() {
        const shadow = this.attachShadow({ mode: 'open' });

        shadow.innerHTML = `
            <style>
                /* діє ЛИШЕ тут */
                .title { color: #0172ad; font-weight: bold; }
            </style>
            <p class="title"></p>
        `;

        // текст користувача — через textContent, не innerHTML
        shadow.querySelector('.title').textContent = this.getAttribute('title');
    }
}

customElements.define('my-card', MyCard);