首先咱們先來看看它長什麼樣子。在HTML5中,咱們只用寫以下簡單的兩行代碼,就能夠經過 <video> 標籤來建立一個瀏覽器自帶的視頻播放器控件。javascript
<video controls=""> <source src="https://mdn.mozillademos.org/files/2587/AudioTest%20(1).ogg" type="audio/ogg"> </video>
而在各個瀏覽器中,它都有各不相同的外觀展示,例如chrome中它長下面這樣:java
但爲何咱們在dom中沒法看到他們內部的結構?噢,實際上瀏覽器經過某種技術把它們隱藏起來而已,但咱們能夠經過 DevTools 設置中勾選Show user agent shadow DOM來看到這些結構。勾選後咱們發如今 <video> 標籤下多了 #shadow-root(user-agent) 這個東西,它包含了 video 控件的內部dom結構,這就是所謂的shadow dom了。node
而且shadow dom爲咱們提供了簡單有效的樣式隔離。若是你嘗試經過 input[type="button"] { display:none; } 之類的樣式來影響控件外觀,你會發現是無效的。這樣若是咱們經過 shadow dom 來隱藏控件的內部實現,就不用擔憂對樣式表進行修改時對控件形成影響了。web
下面咱們來看看如何經過shadow dom來封裝控件。chrome
首先咱們先看看w3c對shadow dom的描述:瀏覽器
A shadow host is an element that hosts one or more node trees.app
A shadow tree is a node tree hosted by a shadow host.dom
A shadow root is the root node of a shadow tree.ide
這三句話告訴咱們:this
下面,咱們直接經過一個例子來演示如何使用shadow dom來封裝web組件:
DOM:
// 模板 <template id="wgTemplate"> <style> color: #fff; background: #006dcc; </style> <button type="button" class="btn">button widget</button> </template> // shadow dom 容器 <div id="my-widget"></div>
JS:
// 建立shadow dom <script type='text/javascript'> var host = document.querySelector("#my-widget") var tp = document.querySelector("#wgTemplate") var clone = document.importNode(tp.content, true) host.createShadowRoot().appendChild(clone) </script>
打開頁面,咱們能夠看到以下結構,這就是一個利用shadow隱藏控件內部實現最簡單的例子了。
接着咱們還能夠結合上一篇文章《web component之custom element》的建立自定義元素的方法來封裝自定義控件:
dom:
// 模板 <template id="wgTemplate"> <style> .btn { color: #fff; background: #006dcc; } </style> <button type="button" class="btn">custom button widget</button> </template>
js:
// 建立自定義控件 <script type='text/javascript'> var proto = Object.create(HTMLElement.prototype, { createdCallback: { value: function() { var tp = document.querySelector('#wgTemplate') var clone = document.importNode(tp.content, true) this.createShadowRoot().appendChild(clone) } } }) var MyButtom = document.registerElement('my-buttom', {prototype: proto}) document.body.appendChild(new MyButtom()) </script>