Shadow DOM入門 - JavaShuo

一、什麼是shadow dow？html

html5的兩個媒體api： audio 和 vedio；咱們在使用的時候常常會感到疑惑，爲何引入一個vedio標籤呈現出來的會是一個挺豐富的頁面呢？html5

<video src="blob:https://www.bilibili.com/e88361f9-38e9-47d6-b8ca-eb375554e5bb"></video>
複製代碼

接下來咱們能夠來看下shadow dom長什麼樣子了？chrome

打開瀏器（chrome）api

一次點擊 setting --> performance --> 選擇 show user agent shadow Dommarkdown

如今能夠看到shadow dom的真身了app

這就是一個shadow dom了，因此一個簡單的vedio標籤也是由不少其餘標籤構成的，只是內部進行了封裝。dom

shadow dom是什麼呢? mdnide

簡單來講：Shadow DOM 是一個 HTML 的規範，其容許開發者封裝本身的 HTML 標籤、CSS 樣式和 JavaScript代碼。也使得開發人員能夠建立諸如 video這樣自定義的一級標籤。總的來講，這些新標籤和相關的 API 被稱爲 Web Components。oop

如何建立一個shadow dom節點呢？（這裏快速貼一個demo)this

首先，新建 demo.js

// demo.jsvar template = `    <button>+</button><span>1</span>    <style>        span{color:red;}        *{font-size:2rem;}    </style>`class SpinButton extends HTMLElement{    constructor(){        super()        var shadow = this.attachShadow({mode:'open'})        var temp = document.createElement('template')        temp.innerHTML = template        shadow.appendChild(temp.content.cloneNode(true))        var add = shadow.querySelector('button')        var val = shadow.querySelector('span')        add.onclick = function() {            val.innerHTML = Number(val.innerHTML) + 1        }            }}customElements.define('demo-button',SpinButton)
複製代碼

而後在index.html中引入改文件

<!doctype html><html><head>    <meta charset="utf-8"/>    <title>demo</title></head><body>    <script src="./demo.js"></script>    <demo-button></demo-button>    <video src="blob:https://www.bilibili.com/e88361f9-38e9-47d6-b8ca-eb375554e5bb"></video></body></html>
複製代碼

一個簡單的shadow dom就建立好了，

只是作了一個簡單的記錄，輕噴哈

相關資料：

developer.mozilla.org/zh-CN/docs/…

soledadpenades.com/2014/01/02/…