什么是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

html 中shadow DOM 的使用的更多相关文章

  1. 【Web技术】401- 在 React 中使用 Shadow DOM

    本文作者:houfeng 1. Shadow DOM 是什么 Shadow DOM 是什么?我们先来打开 Chrome 的 DevTool,并在 'Settings -> Preferences ...

  2. 【shadow dom入UI】web components思想如何应用于实际项目

    回顾 经过昨天的优化处理([前端优化之拆分CSS]前端三剑客的分分合合),我们在UI一块做了几个关键动作: ① CSS入UI ② CSS作为组件的一个节点而存在,并且会被“格式化”,即选择器带id前缀 ...

  3. 封印术：shadow dom

    置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<鼠标滚动插件smoovejs和wowjs> 作者主页:myvin 博主QQ:851399101(点击Q ...

  4. 使用shadow dom封装web组件

    什么是shadow dom? 首先我们先来看看它长什么样子.在HTML5中,我们只用写如下简单的两行代码,就可以通过 <video> 标签来创建一个浏览器自带的视频播放器控件. <v ...

  5. shadow dom

    初识shadow dom 我们先看个input="range"的表现: what amazing ! 一个dom能表现出这么多样式嘛? 无论是初学者和老鸟都是不肯相信的,于是在好奇 ...

  6. shadow dom 隔离代码 封装

    Shadow DOM是指浏览器的一种能力,它允许在文档(document)渲染时插入一棵DOM元素子树,但是这棵子树不在主DOM树中.   Shadow DOM 解决了 DOM 树的封装问题.     ...

  7. 纯CSS菜单样式，及其Shadow DOM，Json接口 实现

    先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识 完整项目github链接:https://github.com/git-Code-Shelf/M ...

  8. JavaScript 是如何工作：Shadow DOM 的内部结构 + 如何编写独立的组件！

    这是专门探索 JavaScript 及其所构建的组件的系列文章的第 17 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! Jav ...

  9. Shadow DOM及自定义标签

    参考链接:点我 一.什么是Shadow DOM Shadow DOM,直接翻译的话就是 影子 DOM,可以理解为潜藏在 DOM 结构中并且我们无法直接控制操纵的 DOM 结构.类似于下面这种结构 Sh ...

随机推荐

  1. 手机html根据手机分辨率网页文字大小自适应

    问题:不同手机型号屏幕尺寸大不相同,导致同样的文字,有的显示一行,有的显示多行. 通过查资料和自己的尝试解决:网页开发习惯的px单位,手机html开发不适用. 源代码如下: <!DOCTYPE ...

  2. loj#2721. 「NOI2018」屠龙勇士

    题目链接 loj#2721. 「NOI2018」屠龙勇士 题解 首先可以列出线性方程组 方程组转化为在模p意义下的同余方程 因为不保证pp 互素,考虑扩展中国剩余定理合并 方程组是带系数的,我们要做的 ...

  3. 家谱(gen)

    家谱(gen) 时间限制  2S [问题描述]     现代的人对于本家族血统越来越感兴趣,现在给出充足的父子关系,请你编写程序找到某个人的最早的祖先. [输入格式]gen.in 输入文件由多行组成, ...

  4. bzoj1402 Ticket to Ride 斯坦纳树 + 状压dp

    给定\(n\)个点,\(m\)条边的带权无向图 选出一些边,使得\(4\)对点之间可达,询问权值最小为多少 \(n \leqslant 30, m \leqslant 1000\) 首先看数据范围,\ ...

  5. 监控 Linux 系统的 7 个命令行工具

    监控 Linux 系统的 7 个命令行工具: " 深入 关于Linux最棒的一件事之一是你能深入操作系统,来探索它是如何工作的,并寻找机会来微调性能或诊断问题.这里有一些基本的命令行工具,让 ...

  6. 【10.10校内测试】【线段树维护第k小+删除】【lca+主席树维护前驱后驱】

    贪心思想.将a排序后,对于每一个a,找到对应的删除m个后最小的b,每次更新答案即可. 如何删除才是合法并且最优的?首先,对于排了序的a,第$i$个那么之前就应该删除前$i-1$个a对应的b.剩下$m- ...

  7. Shell 学习笔记之函数

    hello_fun(){ echo "hello world" echo "$1" # 第一个参数,其中第0个参数为文件本身 } hello_fun 1 在函数 ...

  8. Trie树 理解

    Trie树的理解 Trie树又称单词查找树,字典树,是哈希树的变种: 优点在于:最大限度地减少无谓的字符串比较,查询效率比哈希高: 缺点在于:空间消耗很大: 性质 其基本性质可以归纳为: 跟结点不包括 ...

  9. HDU 3535 AreYouBusy 经典混合背包

    AreYouBusy Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Su ...

  10. MVC基类控制器的会话丢失重新登录权限过滤

    SSOController.cs请查看以下代码: public class SSOController : Controller { public const string Token = " ...