1、什么是shadow dow?
html5的两个媒体api: audio 和 vedio;我们在使用的时候经常会感到疑惑,为什么引入一个vedio标签呈现出来的会是一个挺丰富的页面呢?
<video src="blob:https://www.bilibili.com/e88361f9-38e9-47d6-b8ca-eb375554e5bb"></video>
接下来我们可以来看下shadow dom长什么样子了?
打开浏器(chrome)
一次点击 setting --> performance --> 选择 show user agent shadow Dom
现在可以看到shadow dom的真身了
这就是一个shadow dom了,所以一个简单的vedio标签也是由很多其他标签构成的,只是内部进行了封装。
shadow dom是什么呢? mdn
简单来说:Shadow DOM 是一个 HTML 的规范,其允许开发者封装自己的 HTML 标签、CSS 样式和 JavaScript代码。也使得开发人员可以创建诸如 video这样自定义的一级标签。总的来说,这些新标签和相关的 API 被称为 Web Components。
如何创建一个shadow dom节点呢?(这里快速贴一个demo)
首先,新建 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/…