Shadow DOM

所謂 Shadow DOM 指的是，瀏覽器將模板、樣式表、屬性、JavaScript 碼等，封裝成一個獨立的 DOM 元素。外部的設置無法影響到其內部，而內部的設置也不會影響到外部，與瀏覽器處理原生網頁元素(比如元素)的方式很像。

Shadow DOM 最大的好處有兩個，一是可以向用戶隱藏細節，直接提供組件，二是可以封裝內部樣式表，不會影響到外部。

Custom Element 內部有一個 Shadow Root。它就是接入外部 DOM 的根元素。// attachShadow() creates a shadow root.

let shadow=div.attachShadow({mode:'open'});

let inner=document.createElement('b');

inner.appendChild(document.createTextNode('Hiding in the shadows'));

// shadow root supports the normal appendChild method.

shadow.appendChild(inner);

div.querySelector('b');// empty

上面代碼中，

包含，但是 DOM 方法無法看到它，而且頁面的樣式也影響不到它。

mode: 'open'表示開發者工具里面，可以看到 Custom HTML 內部的 DOM，并與之互動。mode: closed將不允許 Custom Element 的使用者與內部代碼互動。

Shadow root 內部通過指定innerHTML屬性或使用元素，指定 HTML 代碼。

Shadow DOM 內部可以通過向根添加

style.innerText='b { font-weight: bolder; color: red; }';

shadowRoot.appendChild(style);

let inner=document.createElement('b');

inner.innerHTML="I'm bolder in the shadows";

shadowRoot.appendChild(inner);

上面代碼添加的樣式，只會影響 Shadow DOM 內的元素。

Custom Element 的 CSS 樣式內部，:root表示這個根元素。比如，Custom Element 默認是行內元素，下面代碼可以改成塊級元素。:host{

display:block;

}

:host([disabled]){

opacity:0.5;

}

注意，外部樣式會覆蓋掉:host的設置，比如下面的樣式會覆蓋:host。my-element{

display:inline-block;

}

利用 CSS 的自定義屬性，可以為 Custom Element 可以被覆蓋的默認樣式。下面是外部樣式，my-element是 Custom Element。my-element{

--background-color:#ff0000;

}

然后，內部可以指定默認樣式，用于用戶沒有指定顏色的情況。:host{

--background-color:#ffffff;

}

#container {

background-color:var(--background-color);

}

下面的例子是為 Shadow DOM 加上獨立的模板。張三

.outer{

border:2pxsolid brown;

}

Hi! My name is

Bob

總結

以上是生活随笔為你收集整理的html dom阮一峰,Web Components的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。