文档章节

Shadow DOM系列4-样式(续)

一配
 一配
发布于 2015/08/11 17:16
字数 1164
阅读 359
收藏 1

英文链接:Shadow DOM: Styles (cont.), 29 AUGUST 2013 on Web Components, Shadow DOM

昨天的博文里我们整体讨论了设置 Shadow DOM 样式的一些基本事项,但我们仅仅触及了一些皮毛。今天我们紧接着上文继续讨论怎样使用分布节点(distributed nodes)以及怎样将我们的组件打通使外部可以使用并自定义。

在今天开始之前,我想要感谢 Eric Bidelman 的这篇介绍 Shadow DOM 样式添加的宏文(可以戳中文译版)。本文的大部分都是我对他这篇博文内容的实践。如果有机会的话你一定要去读一下HTLM5 Rocks 关于 Web Components 的全部文章

技术支持

我建议你使用 Chrome v33+ 来实验本文的例子,因为 33+ 的 Chrome 对我所描述的这些新特性都有浏览器的原生支持。

分布节点

通过阅读各种博客,我认识到了一点:在使用 shadow DOM 的时候应该确保内容和表现的分离。换句话说,如果你的一个按钮上想展示一些文本,那么这些文本应该来自页面而不是埋在 shadow DOM 的模板里。来自页面并通过 <content> 标签添加到 shadow DOM 的内容被称为分布节点

在最开始我困惑于如何给分布节点添加样式的时候,我这样写 CSS 的:

<div class="some-shadow-host">  
  <button>Hello World!</button>
</div>

<template>  
  <style>
    :host {
      ...
    }

    button {
      font-size: 18px;
    }
  </style>
  <content></content>
</template>

试想如果 button 是来自影子宿主的话,一旦它被 <content> 标签选中,就应该能被我的样式渲染。然而事实却并非如此,实际上,分布节点的样式渲染需要用到 :content 伪类选择器。这样做是十分有意义的,因为我们可能会想让影子模板中的按钮与出现在 <content> 标签中的按钮拥有不同的样式。

让我们看一个实例:

<body>
  <div class="widget">
    <button>分布节点碉堡啦!</button>
  </div>

  <template class="widget-template">
    <style>
      ::content > button {
        font-size: 18px;
        color: white;
        background: tomato;
        border-radius: 10px;
        border: none;
        padding: 10px;
      }
    </style>
    <content select=""></content>
  </template>

  <script>
    var host = document.querySelector('.widget');
    var root = host.createShadowRoot();
    var template = document.querySelector('.widget-template');
    root.appendChild(document.importNode(template.content, true));
  </script>
</body>

enter image description here

在这里我们将按钮从 .widget 影子宿主中取出并放置到 <content> 标签中。使用 ::content 伪类选择器,我们使用 > 将 button 定位到子元素并设置了华丽丽的样式。

::shadow

迄今为止我们已经列举了各种基于 shadow DOM 封装的优点,但有时你可能会想让使用者打破影子边界的壁垒,让他们能够给你的组件添加一些样式。

我们假设你在表单里创建了一个标志。在你的模板里你给输入框定义了文字的大小,但是你希望用户可以改变文字大小以更好的适应自己的网站。使用 ::shadow 伪类选择器我们可以赋予用户重写我们默认定义的自由,如果用户这样做的话,他就可以打破影子边界的壁垒。

<body>
  <style>
    .sign-up::shadow #username,
    .sign-up::shadow #password {
      font-size: 18px;
      border: 1px solid red;
    }

    .sign-up::shadow #btn {
      font-size: 18px;
    }
  </style>
  <div class="sign-up"></div>

  <template class="sign-up-template">
    <style>
      #username,
      #password {
        font-size: 10px;
      }
    </style>
    <div>
      <input type="text" id="username" placeholder="用户名">
    </div>
    <div>
      <input type="password" id="password" placeholder="密码">
    </div>
    <button id="btn">注册</button>
  </template>

  <script>
    var host = document.querySelector('.sign-up');
    var root = host.createShadowRoot();
    var template = document.querySelector('.sign-up-template');
    
    root.appendChild(document.importNode(template.content, true));
  </script>
</body>

enter image description here

/deep/

使用 ::shadow 选择器的一个缺陷是他只能穿透一层影子边界。如果你在一个影子树中嵌套了多个影子树,那么使用 /deep/ 组合符【注】更为简便。

<head>  
  <style>
    #foo /deep/ button {
      color: red;
    }
  </style>
</head>  
<body>  
  <div id="foo"></div>

  <template>
    <div id="bar"></div>
  </template>

  <script>
    var host1 = document.querySelector('#foo');
    var root1 = host1.createShadowRoot();
    var template = document.querySelector('template');
    root1.appendChild(document.importNode(template.content, true));

    var host2 = root1.querySelector('#bar');
    var root2 = host2.createShadowRoot();
    root2.innerHTML = '<button>点我点我</button>';
  </script>
</body>

enter image description here

总结

如果你已经读了本文和最近的一篇博文那么在给 shadow DOM 添加样式方面你已经懂得和我一样多啦。但是我们还没有说 JavaScript 呢!我们把 JavaScript 的部分留到明天再说:)

和以往一样有问题的话去我的 twitter 或者给我留言,感谢阅读~


  • 组合符(Combinator)是 CSS 里的一个概念,用于表示两个选择器之间的关系。现有的组合符号有后代选择器(space)、子选择器(>)、相邻兄弟选择器(+)和兄弟选择器(~)。


本文转载自:http://www.ituring.com.cn/article/177653

一配
粉丝 35
博文 146
码字总数 117133
作品 0
西城
私信 提问
Shadow DOM系列6-综述

Web Components 系列主要由自定义元素(Custom Elements)、HTML 引入(HTML Imports)和影子 DOM(shadow DOM) 组成,而 Shadow DOM 无疑是当中的重中之重。本文对下面翻译的几篇文章进行综...

一配
2015/08/11
126
0
Shadow DOM系列5-JavaScript

英文链接:Shadow DOM: JavaScript, 02 SEPTEMBER 2013 on Web Components, Shadow DOM 我们目前已经对模板、HTML引入和 Shadow DOM(简介、基础、样式、样式续) 有了一定了解。所有这些技...

一配
2015/08/11
563
0
Shadow DOM系列3-样式

原文链接:Shadow DOM: Styles, 28 AUGUST 2013 on Web Components, Shadow DOM 昨天的博文的内容全是关于你的第一个 Shadow DOM 元素的组织和编码。但我知道一大批围观群众都会问:我们咋加...

一配
2015/08/11
586
0
Shadow DOM系列1-简介

英文链接:Shadow DOM: Introduction, 26 AUGUST 2013 on Web Components, Shadow DOM 我们今天要讨论一个有时候十分令人费解的大话题:Shadow DOM。这个话题可能是至少在过去的 5-10 年内前...

一配
2015/08/11
1K
0
JavaScript 是如何工作:Shadow DOM 的内部结构 + 如何编写独立的组件!

摘要: 深入JS系列17。 原文:JavaScript 是如何工作: Shadow DOM 的内部结构+如何编写独立的组件! 作者:前端小智 Fundebug经授权转载,版权归原作者所有。 这是专门探索 JavaScript 及其所...

Fundebug
01/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

新建作业20191011121223

2.编写一个程序,发出一声警报,然后打印下面的文本: Startled by the sudden sound,Sally shouted,"By the Great Pumpkin,what was that!" #include<stdio.h>int main(){printf("\a");......

电子197朱妍
35分钟前
6
0
家庭作业——苗钰婷

2 编写一个程序,发出一声警报,然后打印下面的文本: Startled by the sudden sound, Sally shouted, "By the Great Pumpkin, what was that! #include<stdio.h>int main(){......

OSC_Okruuv
56分钟前
8
0
经典系统设计面试题解析:如何设计TinyURL(一)

原文链接: https://www.educative.io/courses/grokking-the-system-design-interview/m2ygV4E81AR 编者注:本文以一道经典的系统设计面试题:《如何设计TinyURL》的参考答案和解析为例,帮助...

APEMESH
57分钟前
8
0
2.面向对象设计原则(7条)

开闭原则 开闭原则的含义是:当应用的需求改变时,在不修改软件实体的源代码或者二进制代码的前提下,可以扩展模块的功能,使其满足新的需求。 实现方法 可以通过“抽象约束、封装变化”来实...

Eappo_Geng
59分钟前
12
0
8086汇编基础 debug P命令 一步完成loop循环

    IDE : Masm for Windows 集成实验环境 2015     OS : Windows 10 x64 typesetting : Markdown    blog : my.oschina.net/zhichengjiu    gitee : gitee.com/zhichengjiu   ......

志成就
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部