Über Shadow DOM

Hallo!

Ich setze meinen Veröffentlichungszyklus über die Gruppe der Webkomponenten -Standards fort . Mein Ziel ist es, realistische Erwartungen an diese Technologien zu wecken und gemeinsam mit Ihnen ein klareres Verständnis dafür zu erlangen, wo sie nicht angewendet werden sollten und wo im Gegenteil noch nichts Besseres erfunden wurde. Dieses Mal schlage ich vor, näher auf Shadow DOM einzugehen .

, , , . , 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 ist eine leistungsstarke und flexible Technologie. Seine Verwendung kann die Lösung vieler Probleme erheblich erleichtern und eröffnet Raum für Kreativität bei der Lösung atypischer Probleme. Erwarten Sie von ihr jedoch keine magische Antwort auf alle Ihre Fragen und keine Schwierigkeiten.