Element.shadowRoot

http://www.zhuyuntao.cn/shadow-dom的样式/

Shadow DOM的样式

我们已经可以使用原生的操作DOM的方式和使用模板的方式来创建Shadow DOM了,但是创建出来的毕竟只有HTML,是时候用CSS来修改下他们的样式了。

一、样式封装

前面曾说过,正常DOM的样式是不会影响到Shadow DOM中的样式的。例如:

<style type="text/css">
.red {
color: red;
}
</style> <p class="red">hello world</p>
<div id="box"></div> var oBox = document.querySelector('#box'); var shadowRoot = oBox.createShadowRoot();
shadowRoot.innerHTML="<span class='red'>11111</span>";

我们使用了red样式来使文字的颜色变为红色,但是页面显示的并不是我们想的那样。

在Shadow内部的元素并没有受到这个样式的影响。于是我们尝试在添加元素的时候加入style样式。

var oBox = document.querySelector('#box');
var shadowRoot = oBox.createShadowRoot();
shadowRoot.innerHTML="<span class='red'>11111</span><style>span{color:blue;}</style>";

此时,Shadow 中的元素的颜色变成了蓝色,也就是起作用了。

这种作用域化的特性使得我们可以使用局部的、组件化的思想来考虑书写CSS样式了。

二、宿主样式(:host)

有时我们需要给宿主元素增加些样式,你可能会想到在外部增加,当然这不符合组件化的思想,所以:host样式就有他的用处了。

/*额外在外部增加一个div的样式*/
div {
font-weight: bold;
} var oBox = document.querySelector('#box'); var shadowRoot = oBox.createShadowRoot();
shadowRoot.innerHTML="<span class='red'>11111</span><style>\
:host {\
border: 1px solid #ccc;\
width: 200px;\
height: 100px;\
}";

此时,宿主对象的样式被改变了。

此时我们发现Shadow DOM内部的元素多了个粗字体的样式。选中内部的span元素,在Element下的右侧的样式面板中,我们发现:

由于宿主对象在外部的CSS样式表中被渲染成了粗体显示,而这个属性是有继承性的,导致Shadow DOM内部的span元素也继承了这个属性。

注:Shadow DOM并不是真正不受外部影响的。样式的优先级同普通DOM元素样式的规则。

三、宿主样式状态

既然:host样式可以通过innerHTML添加到Shadow DOM中,那么同样可以放在templete中引入Shadow 内部。

有时我们需要给宿主元素添加例如悬浮的样式,我们可以:
<div id="box">world</div> <template class="box-template">
    hello,<content></content>
<style>
:host {
border: 1px solid #ccc;
width: 300px;
height: 200px;
}
:host(:hover) {
border: 1px solid red;
};
</style>
</template> <script type="text/javascript">
var oBox = document.querySelector('#box'); var shadowRoot = oBox.createShadowRoot();
var template = document.querySelector('.box-template');
shadowRoot.appendChild(document.importNode(template.content, true));
</script>

当鼠标悬浮到宿主对象时,边框就会变成绿色的。

三、宿主样式中的类型选择器

我们通过增加:hover伪类给宿主元素增加悬浮样式,注::host也是伪类。我们可以将:host作用于多个元素上来改变样式。

<body>
<div class="html">HTML</div>
<div id="css">CSS</div>
<p>JavaScript</p> <template class="box-template">
<style>
:host(*) {
font-weight: bold;
}
:host(.html) {
color: yellow;
}
:host(#css) {
color: red;
}
:host(p) {
color: pink;
}
</style>
hello,<content></content>
</template>
</body> <script type="text/javascript">
var HTMLRoot = document.querySelector('.html').createShadowRoot();
var CSSRoot = document.querySelector('#css').createShadowRoot();
var JSRoot = document.querySelector('p').createShadowRoot(); var template = document.querySelector('.box-template');
HTMLRoot.appendChild(document.importNode(template.content, true));
CSSRoot.appendChild(document.importNode(template.content, true));
JSRoot.appendChild(document.importNode(template.content, true));
</script>

我们发现,可以根据类名、ID、属性等等来进行匹配选择——任何有效的 CSS 选择器都可以正常工作。

四、主题化

<div class="html">HTML</div>
<div id="css">CSS</div> <template class="box-template">
<style>
:host-context(.html) {
width: 300px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: olive;
color: red;
}
:host-context(#css) {
width: 300px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: #abcdef;
color: #fff;
}
</style>
hello,<content></content>
</template> <script type="text/javascript">
var HTMLRoot = document.querySelector('.html').createShadowRoot();
var CSSRoot = document.querySelector('#css').createShadowRoot(); var template = document.querySelector('.box-template');
HTMLRoot.appendChild(document.importNode(template.content, true));
CSSRoot.appendChild(document.importNode(template.content, true));
</script>

使用 :host-context() 的语法我们可以基于内容元素修改我们组件的外观,他可以选择影子宿主的祖先元素的(context的祖先)。这种使用方式类似于子类选择器的反向使用,就像.parent < .child这样,而在Shadow DOM中就可以这么使用。

五、分布节点

来自页面并通过 <content> 标签添加到 shadow DOM 的内容被称为分布节点。也就是说,如果你的一个span上想展示一些文本,那么这些文本应该来自页面而不是放在 shadow DOM 的模板里。于是我们可以这样写:

<div id="box">
<span>hello,world</span>
</div> <template class="box-template">
<style>
:host {
width: 300px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: olive;
}
/* 给span加上样式,我们也许会这么写 */
:host(span) {
color: red;
}
/* 又或者这么写 */
:host span {
color: red;
}
</style>
<content></content>
</template>
<script type="text/javascript">
var shadowRoot = document.querySelector('#box').createShadowRoot(); var template = document.querySelector('.box-template');
shadowRoot.appendChild(document.importNode(template.content, true));
</script>

这两种给span增加样式的方法都是行不通的,分布节点的样式渲染需要用到 ::content 伪类选择器,将前面CSS代码中我们尝试给span添加颜色的样式换成

 ::content > span {
color: red;
}

我们便可以得到:

样式成功的生效了。

六、::shadow

Shadow DOM的良好封装性是很有用处。但有时你可能会想让使用者给你的组件添加一些样式。使用 ::shadow 伪类选择器我们可以赋予用户重写我们默认定义的自由,如果用户这样做的话,他就可以打破影子边界的壁垒。

<style type="text/css">
#box::shadow #sign {
color: red;
}
#box::shadow .cnt {
color: yellow;
}
</style>
<div id="box">
<span>hello,world</span>
</div> <template class="box-template">
<style>
:host {
width: 300px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: olive;
}
span {
color: green;
}
</style>
<div>
<p>
<span id="sign">hello,</span>
<span class="cnt">world</span>
</p>
</div>
</template>
<script type="text/javascript">
var shadowRoot = document.querySelector('#box').createShadowRoot(); var template = document.querySelector('.box-template');
shadowRoot.appendChild(document.importNode(template.content, true));
</script>

Element.shadowRoot的更多相关文章

  1. 前端应该知道的Web Components

    前端组件化的痛点 在前端组件化横行的今天,确实极大的提升了开发效率.不过有一个问题不得不被重视,拟引入的这些html.css.js代码有可能对你的其他代码造成影响. 虽然我们可以通过命名空间.闭包等一 ...

  2. 前端组件化-Web Components【转】

    以下全部转自:http://www.cnblogs.com/pqjwyn/p/7401918.html 前端组件化的痛点在前端组件化横行的今天,确实极大的提升了开发效率.不过有一个问题不得不被重视,拟 ...

  3. Salesforce LWC学习(二十五) Jest Test

    本篇参看: https://trailhead.salesforce.com/content/learn/modules/test-lightning-web-components https://j ...

  4. 从原生web组件到框架组件源码(一)

    温馨提醒,当你觉得看我写的很乱的时候,就对了,那是因为我查阅了大量的资料提取出来的,因为有点东西不太理解,所以你会感觉有的部分重复了,也不是重复,只是后面对前面的内容进行梳理了一些,需要耐心的看到最后 ...

  5. Vue3全局APi解析-源码学习

    本文章共5314字,预计阅读时间5-15分钟. 前言 不知不觉Vue-next的版本已经来到了3.1.2,最近对照着源码学习Vue3的全局Api,边学习边整理了下来,希望可以和大家一起进步. 我们以官 ...

  6. JS21. 使用原生JS封装一个公共的Alert插件(HTML5: Shadow Dom)

    效果预览 Shadow DOM Web components  的一个重要属性是封装--可以将标记结构.样式和行为隐藏起来,并与页面上的其他代码相隔离,保证不同的部分不会混在一起,可使代码更加干净.整 ...

  7. 究竟什么是Shadow DOM?

    shadow dom 是什么? 顾名思义,shadow dom直译的话就是影子dom,但我更愿把它理解为DOM中的DOM.因为他能够为Web组件中的 DOM和 CSS提供了封装,实际上是在浏览器渲染文 ...

  8. Dart- move html element

    今天给出一个例程,像是个小游戏!哈哈 一 html //anagram.html <!DOCTYPE HTML> <html> <head> <title&g ...

  9. style element & web components

    style element & web components style.textContent style.setContent bug style.textContent const st ...

随机推荐

  1. 20170430深圳Meetup

    一.类似于淘宝网,可以连续选择多个商品筛选条件,这多个参数如何传递到后台,进行数据交互? 方案一: def index // 给view提供多个参数 @param1 = ... @param2 = . ...

  2. linux添加一个已经存在用户到一个用户组

    在使用virtual-box的共享文件时,在虚拟机中共享文件的用户为root,用户组为vboxsf, 所以需要将自己添加到vboxsf这组当中去,一开始使用useradd老是失败,后来才查到要用use ...

  3. oracle分组后取某组中最大的值

    查询username,根据fundcode分组,按照date倒序,取date最大的一条数据 select * from ( select username, row_number() over(par ...

  4. python 输出99乘法表

    for i in range(1,10): for j in range(1,i+1): print("%s*%s=%2s"%(i,j,i*j),end=" " ...

  5. jQuery原理系列-css选择器实现

    jQuery最强大的功能在于它可以通过css选择器查找元素,它的源码中有一半是sizzle css选择器引擎的代码,在html5规范出来之后,增加了document.querySelector和doc ...

  6. 【转】AutoMapper对象映射

    什么是AutoMapper?AutoMapper是一个简单的小型库,用于解决一个看似复杂的问题 - 摆脱将一个对象映射到另一个对象的代码.这种类型的代码是相当沉闷和无聊的写,所以为什么不发明一个工具来 ...

  7. Oozie笔记

    简介 Oozie 是用于 Hadoop 平台的开源的工作流调度引擎. 用于管理 Hadoop 属于web应用程序, 由 Oozie client 和 Oozie Server 两个组件构成. Oozi ...

  8. Z-function

    用更容易理解的方法处理出 s[l----r]=s[1----r-l+1] 常数比KMP略大,时间复杂度\(O(n)\),方法和manacher很像 #include<bits/stdc++.h& ...

  9. 15 —— npm —— package.json 与 package-lock.json 的作用

    一,package.json  是 npm init 时创建的一个文件,会记录当前整个项目中的一些基础信息. 二,package-lock.json 是 node_modules 文件夹或者 pack ...

  10. 15. react UI组件和容器组件的拆分 及 无状态组件

    1.组件的拆分 组件拆分的前提 当所有的逻辑都出现在一个组件内时 组件会变得非常复杂 不便与代码的维护 所以对组件进行拆分 IU组件 进行页面渲染 容器组件  进行逻辑操作 UI组件的拆分 新建一个 ...