From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/element/shadowroot/index.html | 132 ++++++++++++++++++++++ 1 file changed, 132 insertions(+) create mode 100644 files/zh-cn/web/api/element/shadowroot/index.html (limited to 'files/zh-cn/web/api/element/shadowroot') diff --git a/files/zh-cn/web/api/element/shadowroot/index.html b/files/zh-cn/web/api/element/shadowroot/index.html new file mode 100644 index 0000000000..2e85ab3d16 --- /dev/null +++ b/files/zh-cn/web/api/element/shadowroot/index.html @@ -0,0 +1,132 @@ +--- +title: Element.shadowRoot +slug: Web/API/Element/shadowRoot +tags: + - API + - DOM遍历 + - ShadowRoot +translation_of: Web/API/Element/shadowRoot +--- +

{{APIRef('Shadow DOM')}} {{SeeCompatTable}}{{draft}}

+ +

Element.shadowRoot 是只读属性，表示元素挂载的shadow root。可以使用 {{domxref('Element.attachShadow')}} 给一个已存在的元素添加shadow root。

+ +

语法

+ +
var shadowroot = element.shadowRoot;
+
+ +

值

+ +

可以是一个{{domxref('ShadowRoot')}}实例对象，但如果一个shadow root的 {{domxref("ShadowRoot.mode", "mode")}}被设置为 closed那么它的值将会是 null。(详情请见 {{domxref("Element.attachShadow")}} ).

+ +

示例

+ +

下面代码片段取自 life-cycle-callbacks (在线查看), 在这个示例中我们创建了一个在元素属性中指定了大小和颜色的正方形元素。

+ +

在<custom-square>标签的class定义中我们在生命周期的回调函数里调用了一些外部方法——updateStyle()，正是这个函数使得我们添加的正方形元素可以改变大小和颜色。你可以看到我们将this（即我们创建的正方形元素本身）作为一个参数传入了这个方法。

+ +
connectedCallback() {
+  console.log('Custom square element added to page.');
+  updateStyle(this);
+}
+
+attributeChangedCallback(name, oldValue, newValue) {
+  console.log('Custom square element attributes changed.');
+  updateStyle(this);
+}
+
+ +

在updateStyle()函数中我们通过{{domxref("Element.shadowRoot")}}获取到了Shadow DOM引用。在这里我们利用了标准的DOM遍历技巧来获取在Shadow DOM中{{htmlelement("style")}}元素并更新了其中的CSS样式：

+ +
function updateStyle(elem) {
+  const shadow = elem.shadowRoot;
+  const childNodes = Array.from(shadow.childNodes);
+
+  childNodes.forEach(childNode => {
+    if (childNode.nodeName === 'STYLE') {
+      childNode.textContent = `
+        div {
+          width: ${elem.getAttribute('l')}px;
+          height: ${elem.getAttribute('l')}px;
+          background-color: ${elem.getAttribute('c')};
+        }
+      `;
+    }
+  });
+}
+ +

 

+ +

标准

+ + + + + + + + + + + + + + +
标准状态备注
{{SpecName('Shadow DOM', '#widl-Element-attachShadow-ShadowRoot-ShadowRootInit-shadowRootInitDict', 'attachShadow()')}}{{Spec2('Shadow DOM')}}Initial definition.
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
特性ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基本支持{{CompatChrome(53.0)}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
特性AndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
 基本支持{{CompatNo}}{{CompatChrome(53.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(53.0)}}
+
-- cgit v1.2.3-54-g00ecf