À propos de Shadow DOM

salut!

Je continue mon cycle de publications sur le groupe de normes Web Components . Mon objectif est de créer des attentes réalistes à partir de cet ensemble de technologies et également, avec vous, de mieux comprendre où elles ne devraient pas être appliquées et où, au contraire, rien de mieux n'a encore été inventé. Cette fois, je suggère de m'attarder plus en détail sur Shadow DOM .

, , , . , 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 est une technologie puissante et flexible. Son utilisation peut grandement faciliter la résolution de nombreux problèmes et ouvre la voie à la créativité pour résoudre des problèmes atypiques. Mais n'attendez pas d'elle une réponse magique à toutes vos questions et une absence totale de difficultés.