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. POJ 2785：4 Values whose Sum is 0 二分

    4 Values whose Sum is 0 Time Limit: 15000MS   Memory Limit: 228000K Total Submissions: 18221   Accep ...

  2. xargs详细

    转自  http://czmmiao.iteye.com/blog/1949225 简介之所以能用到这个命令,关键是由于很多命令不支持|管道来传递参数,而日常工作中有有这个必要,所以就有了xargs命 ...

  3. Linux 文件夹和文件大小排序

    Linux 文件夹和文件大小排序 文件夹排序 du -k | sort -rn 文件排序 ls -lS -r, –reverse 依相反次序排列 -R, –recursive 同时列出所有子目录层 - ...

  4. Vulkan SDK 之 DrawCube

    Waiting for a Swapchain Buffer Beginning the Render Pass Bind the Pipeline Bind the Descriptor Sets ...

  5. Elasticsearch全文搜索引擎-PHP使用教程。

    1.声明依赖关系:         比方说,你的项目中需要一个php版的elasticsearch框架.为了将它添加到你的项目中(下载),你所需要做的就是创建一个 composer.json 文件,其 ...

  6. T_SQL 将一列多行数据合并为一行

    SQL Server在进行数据迁移和报表处理的时候会遇到将一列多行数据拼接为一个字符串的情况,为了处理这个问题,在网上找了一些相关的资料,提供两种方法,供遇到类似问题的朋友们参考,也借此加深自己的印象 ...

  7. js原型链理解(3)--构造借用继承

    构造借用(constructor strealing) 1.为什么已经存在原型链继承还要去使用构造借用 首先看一下这个例子 function Super(){ this.sets = [0,1,2]; ...

  8. 用Visual studio11在Windows8上开发驱动实现注册表监控和过滤

    在Windows NT中,80386保护模式的“保护”比Windows 95中更坚固,这个“镀金的笼子”更加结实,更加难以打破.在Windows 95中,至少应用程序I/O操作是不受限制的,而在Win ...

  9. ..\EEP\EEP.c(249): error: #268: declaration may not appear after executable statement in block

    主要原因:  ON_nWP;这个应该放在 unsigned char Delay; unsigned char ReData; 的后面. 修改成功.

  10. python的常用序列

    list1.list(obj)函数 obj可以为:元组(1,2,3),可迭代对象,字符串等转换换成数组类型2. 列表元素的添加 (1)list+[添加的元素] (2)list.append(添加元素) ...