Tentang Shadow DOM

Halo!

Saya melanjutkan siklus publikasi saya tentang kelompok standar Komponen Web . Tujuan saya adalah untuk menciptakan ekspektasi yang realistis dari rangkaian teknologi ini, dan juga, bersama Anda, mencapai pemahaman yang lebih jelas tentang di mana mereka tidak boleh diterapkan, dan di mana, sebaliknya, tidak ada yang lebih baik yang telah ditemukan. Kali ini, saya sarankan untuk membahas Shadow DOM lebih detail .

, , , . , Shadow DOM - DOM API, , . , , , , , HTML- audio - , #shadow-root - . Shadow DOM audio. , "" , - . UI-, , , . . , , . Shadow DOM, , "?".

Shadow DOM?

1. . Shadow DOM "", , ( , "") DOM API, , , ( , ID , ).

2. . Shadow DOM "" DOM- . , Shadow DOM , , - slot. , , - .

, , - ( LitElement), , Shadow DOM - -. . Custom Elements Shadow DOM , , DOM , div. DOM , , CSS- "element.style", , , media- . JavaScript ( , ). Shadow DOM:

let myElement = document.createElement('div');
myElement.attachShadow({
  mode: 'open',
});
myElement.shadowRoot.innerHTML = /*html*/ `
<style>
:host {
  padding: 10px;
}
:host(:hover) {
  color: red;
}
</style>
<slot></slot>
`;

div , . Shadow DOM - :host, , JS. , , , .

Shadow DOM?

, -, - : UI--, -, . , , " " .

Shadow DOM.

, , -, - : .

" ".

?

, Shadow DOM , (, Custom Elements).

Shadow DOM JavaScript, , (SSR) . , .

, CSP (Content Security Policy) - DOM. . innerHTML, insertRule, . , , , - CSP- unsafe-inline. , - . Chromium, adoptedStylesheets. element.style (, , ), Shadow DOM :

let myElement = document.createElement('div');
myElement.attachShadow({
  mode: 'open',
});
myElement.shadowRoot.innerHTML = /*html*/ `
<link rel="stylesheet" href="styles.css">
<slot></slot>
`;

Shadow DOM, , , , , DOM . DOM, .

, , : IE - DOM . , , .

Shadow DOM adalah teknologi yang kuat dan fleksibel. Penggunaannya dapat memfasilitasi pemecahan banyak masalah dan membuka ruang lingkup kreativitas dalam memecahkan masalah atipikal. Tetapi jangan berharap darinya jawaban ajaib untuk semua pertanyaan Anda dan tidak adanya kesulitan.