Clever Geek Handbook

关于Shadow DOM

你好！

我继续进行有关Web组件标准组的出版物的发行。我的目标是从这套技术中形成切合实际的期望，并与您一起对不应该应用这些技术以及相反地还没有发明更好的技术有更清晰的了解。这次，我建议更详细地介绍Shadow DOM。

让我们从基础开始，以使我们中那些尚未遇到讨论主题的人不会对本文的主要部分失去兴趣。因此，Shadow DOM是现代DOM API的一部分，该API允许您使用自己的内部标记和自己的样式来创建文档的孤立区域。如果使用浏览器中的开发人员工具打开包含例如标准HTML音频元素的文档结构，则将看到一个指定为＃shadow-root的区域以及内部的某种标记 这是音频元素的Shadow DOM。如您所见，即使没有使用基于Web组件或基于Web的库创建的文档，我们也可能在应用程序和站点页面中遇到“阴影”区域。该声明适用于所有标准浏览器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