html 中shadow DOM 的使用

什么是shadow DOM?

An important aspect of web components is encapsulation — being able to keep the markup structure, style, and behavior hidden and separate from other code on the page so that different parts do not clash, and the code can be kept nice and clean. The Shadow DOM API is a key part of this, providing a way to attach a hidden separated DOM to an element. This article covers the basics of using the Shadow DOM.

下面这个是shadow DOM 的使用例子：

html:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>shadowDOM</title><style type="text/css">#div {width: 300px;height: 50px;border: 1px solid #666;padding: 15px;}</style>
</head>
<body><div id="div">这里是不显示出来的</div><button>点我点我</button>
</body>
</html>

　　javascript:

function createShadowDOM(elem) {var root = elem.createShadowRoot();root.appendChild(createStyle());root.appendChild(createInputDiv("姓名","name"));
}function createStyle() {var style = document.createElement('style');style.textContent = 'div.input-div { height: 30px; width: 250px; }' +'font.input-font { line-height: 30px;font-size: 16px;color: #495A80; margin-right: 10px;}'+'span.input-area {width: 200px;height: 25px;line-height: 25px;padding-left: 5px;display:inline-block;color: #666;font-size: 16px;border: 1px solid #999;border-radius: 3px;}';return style;
}function createInputDiv(font, name) {var inputDiv = document.createElement('div');inputDiv.className = 'input-div';inputDiv.innerHTML = "<font class='input-font'>" + font + "</font><span class='input-area' contentEditable='true' id=" + name + "></span>";return inputDiv;
}createShadowDOM(document.querySelector("#div"));document.querySelector('button').addEventListener('click', function() {console.log(document.querySelector('#div').shadowRoot.querySelector('#name').innerHTML);
})

　　结果:

This article assumes you are already familiar with the concept of the DOM (Document Object Model) — a tree-like structure of connected nodes that represents the different elements and strings of text appearing in a markup document (usually an HTML document in the case of web documents). As an example, consider the following HTML fragment:

两个其前端前沿网站：

js代码在线编辑：https://jsbin.com/?html,output

兼容性查询：https://caniuse.com/

----------------------------------------------------------------------------------------------------------

参考: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

https://blog.csdn.net/qq_31280709/article/details/75577439

转载于:https://www.cnblogs.com/oxspirt/p/9816467.html

html 中shadow DOM 的使用相关推荐

Shadow DOM系列1-简介
为什么80%的码农都做不了架构师?>>> 英文链接:Shadow DOM: Introduction, 26 AUGUST 2013 on Web Components, Sh ...
理解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及自定义标签
参考链接:点我一.什么是Shadow DOM Shadow DOM,直接翻译的话就是影子 DOM,可以理解为潜藏在 DOM 结构中并且我们无法直接控制操纵的 DOM 结构.类似于下面这种结构 Sh ...
[html] 举例说明Shadow DOM的应用场景有哪些？
[html] 举例说明Shadow DOM的应用场景有哪些? 可以将 shadow DOM 视为"DOM中的DOM".它是自己独立的DOM树,具有自己的元素和样式,与原始DOM完全 ...
Shadow DOM的理解
Shadow DOM的理解 Shadow DOM是HTML的一个规范,其允许在文档document渲染时插入一颗DOM元素子树,但是这棵子树不在主DOM树中,Shadow DOM如果按照英文翻译的话可 ...
纯CSS菜单样式，及其Shadow DOM，Json接口实现
先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识先放一张效果图 Part 1:纯CSS菜单样式先放样式代码 1 <sty ...
Chrome 53 支持 Shadow DOM 等规范
上周发布的 Chrome 53 带来了一系列实验性规范的支持,如Shadow DOM,它为复杂网页的开发提供便利.同时,针对移动平台,Chrome 53也提供了PaymentRequest接口.自定义 ...
Chrome 53 支持Shadow DOM、PaymentRequest等规范
上周发布的 Chrome 53 带来了一系列实验性规范的支持,如Shadow DOM,它为复杂网页的开发提供便利.同时,针对移动平台,Chrome 53也提供了PaymentRequest接口.自定义 ...
Shadow DOM 样式隔离 js沙箱
这种方法可能适用于中台这种嵌套其他子应用的场景,目前没遇到其他使用场景或有更好的解决方案在线demo 不管是link导入的样色还是<style>标签样色都可以被隔离,不影响shadow ...

html 中shadow DOM 的使用

html 中shadow DOM 的使用相关推荐

最新文章

热门文章