Shadow DOM及自定义标签

参考链接：点我

一、什么是Shadow DOM

Shadow DOM，直接翻译的话就是 影子 DOM，可以理解为潜藏在 DOM 结构中并且我们无法直接控制操纵的 DOM 结构。类似于下面这种结构

Shadow DOM 可以在浏览器中生成一个独立于DOM树之外的 DOM结构

二、Shadow DOM的结构

1、Shadow host：相当于存放Shadow DOM的容器

2、Shadow root：Shadow DOM的根，它和它的后代元素，都将对用户隐藏，但是它们是实际存在的，在 chrome 中，我们可以通常审查元素去查看它们的具体 DOM 实现。

3、contents：Shadow DOM的具体内容

三、如何创建使用Shadow DOM

1、创建

function createShadowDOM(elem) {// var root = elem.createShadowRoot() //已被attachShadow替换var root = elem.attachShadow({mode:"open"})// mode为open时对外可以访问root.appendChild(createComponent("costom-component"))// 自定义标签}

2、使用

<div id="div">这里是不显示出来的，如果你看到了，说明浏览器不支持ShadowDOM</div>
createShadowDOM(document.querySelector("#div"))

3、获取Shadow DOM

document.querySelector('#div').shadowRoot

四、用途

1、在编写插件时，需要向DOM中插入新的DOM，但又怕样式或者DOM发生冲突，Shadow DOM的样式以及结构都是对外分开，不会溢出，外部的亦不会侵入

2、登其他自己去发现

五、优缺点

优点：

1、可封装复用

2、不会增加DOM的结构

3、样式独立

缺点：

1、兼容性差

2、不易调试或检查

七、自定义标签

自定义元素：点我

使用es6的class写法，继承 HTMLElement，使用connectedCallback添加方法，使用attributeChangedCallback做属性的改变

注：自定义标签的名称必须是包含一个破折号（ - ），并且不能有大写字母

class CustomElement extends HTMLElement {constructor() {super()this._name = 'Custom'}connectedCallback() {this.addEventListener('click', e => alert(`Hello, ${this._name}!`));}attributeChangedCallback(attrName, oldValue, newValue) {if (attrName === 'name') {if (newValue) {this._name = newValue} else {this._name = 'Custom'}}}}CustomElement.observedAttributes = ['name']customElements.define('costom-component', CustomElement)

转载于:https://www.cnblogs.com/detanx/p/ShadowDOMCustom.html

Shadow DOM及自定义标签相关推荐

Shadow DOM 样式隔离 js沙箱
这种方法可能适用于中台这种嵌套其他子应用的场景,目前没遇到其他使用场景或有更好的解决方案在线demo 不管是link导入的样色还是<style>标签样色都可以被隔离,不影响shadow ...
理解Shadow DOM
1. 什么是Shadow DOM? Shadow DOM 如果按照英文翻译的话可以理解为影子DOM, 何为影子DOM呢?可以理解为一般情况下使用肉眼看不到的DOM结构,那如果一般情况下看不到的话,那 ...
[译] 用 Shadow DOM v1 和 Custom Elements v1 实现一个原生 Web Component
原文地址:Make a Native Web Component with Custom Elements v1 and Shadow DOM v1 原文作者:Pearl Latteier 译文出自: ...
Shadow DOM系列1-简介
为什么80%的码农都做不了架构师?>>> 英文链接:Shadow DOM: Introduction, 26 AUGUST 2013 on Web Components, Sh ...
Chrome 53 支持 Shadow DOM 等规范
上周发布的 Chrome 53 带来了一系列实验性规范的支持,如Shadow DOM,它为复杂网页的开发提供便利.同时,针对移动平台,Chrome 53也提供了PaymentRequest接口.自定义 ...
Chrome 53 支持Shadow DOM、PaymentRequest等规范
上周发布的 Chrome 53 带来了一系列实验性规范的支持,如Shadow DOM,它为复杂网页的开发提供便利.同时,针对移动平台,Chrome 53也提供了PaymentRequest接口.自定义 ...
js 创建自定义标签
原理: 自定义标签是通过定义class类继承HTMLElement实现的, class特性是ECMAScript6中引入的特性, ES6以下没有这个特性 class 不是新的对象继承模型,它只是原型链 ...
html5创建自定义标签,在html中创建自定义标签
创建并使用自定义标签 Web Components 标准非常重要的一个特性是,它使开发者能够将HTML页面的功能封装为 custom elements(自定义标签),本篇介绍使用 CustomElem ...
html5 shadow dom,Shadow DOM入门
1.什么是shadow dow? html5的两个媒体api: audio 和 vedio:我们在使用的时候经常会感到疑惑,为什么引入一个vedio标签呈现出来的会是一个挺丰富的页面呢? 复制代码接 ...

Shadow DOM及自定义标签

Shadow DOM及自定义标签相关推荐

最新文章

热门文章