Clever Geek Handbook

ShadowDOMについて

こんにちは！

私は、標準のWebコンポーネントグループに関する出版のサイクルを続けています。私の目標は、この一連のテクノロジーから現実的な期待を形成することです。また、あなたと一緒に、それらを適用すべきでない場所と、それどころか、これ以上優れたものがまだ発明されていない場所をより明確に理解することです。今回は、ShadowDOMについて詳しく説明することをお勧めします。

, , , . , 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は、強力で柔軟なテクノロジーです。その使用は、多くの問題の解決を大いに促進し、非定型の問題を解決する際の創造性の余地を開きます。しかし、彼女からのすべての質問に対する魔法の答えと、完全に困難がないことを期待しないでください。



More articles:


All Articles