JavaScript ShadowRoot.mode — відкритий чи закритий режим тіні

Властивість mode повертає режим тіні: open або closed.

правити

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

У режимі open тінь доступна ззовні через element.shadowRoot. У closed ця властивість дає null — навіть твоєму власному коду.

Звабливо подумати, що closed — це захист. Це не так: посилання на тінь однаково є всередині компонента, і його легко витягти. Захисту не додається, а от налагодження й тестування ускладнюються по-справжньому.

Тому в реальних проєктах беруть open майже завжди.

правити

Нотатка

closed не захищає — це лише незручність. Хто справді хоче дістатись до тіні, дістанеться; страждатимуть тільки твої власні тести.

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

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

Переглядачі

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

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

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

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

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

Приклади

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

const openHost = document.createElement('div');
const open = openHost.attachShadow({ mode: 'open' });

console.log(open.mode);            // 'open'
console.log(openHost.shadowRoot);  // ShadowRoot

const closedHost = document.createElement('div');
const closed = closedHost.attachShadow({ mode: 'closed' });

console.log(closed.mode);            // 'closed'
console.log(closedHost.shadowRoot);  // null — навіть для нас