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就建立好了，

只是作了一个简单的记录，轻喷哈