¡Hola!
Continúo mi ciclo de publicaciones sobre el grupo de estándares de Componentes Web . Mi objetivo es crear expectativas realistas a partir de este conjunto de tecnologías y también, junto con usted, llegar a una comprensión más clara de dónde no deben aplicarse y dónde, por el contrario, no se ha inventado nada mejor. Esta vez, sugiero que nos detengamos en Shadow DOM con más detalle .
, , , . , Shadow DOM - DOM API, , . , , , , , HTML- audio - , #shadow-root - . Shadow DOM audio. , "" , - . UI-, , , . . , , . Shadow DOM, , "?".
Shadow DOM?
. Shadow DOM "", , ( , "") DOM API, , , ( , ID , ).
. 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 , (, 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 es una tecnología potente y flexible. Su uso puede facilitar enormemente la solución de muchos problemas y abre un espacio a la creatividad para resolver problemas atípicos. Pero no espere una respuesta mágica a todas sus preguntas de ella y una ausencia total de dificultades.