webcomponent学习笔记(一)

webcomponent是一个新的浏览器功能,为web提供了一个标准组件模型,包括以下几个部分:

  • Shadow DOM
  • Custom Elements
  • HTML Imports
  • HTML Templates

Shadow DOM是什么

直接翻译是 影子文档对象模型。

定义:Shadow DOM 是一个 HTML 的新规范,其允许开发者封装自己的 HTML 标签、CSS 样式和 JavaScript代码。 使得开发人员可以自定义诸如 <input type="range"> 这样的一级标签。

我们就用range组件来来解释Shadow DOM

<input type="range">

打开Chrome的开发者工具,点击右上角的"Settings"按钮,

勾选“Show user agent shadow DOM”,

你就可以看到range组件的DOM结构的细节。

你会发现,浏览器内部实现range组件也是通过定义dom结构来实现的。 看到标灰的 #shadow-root 了吗?这里就是所有视频播放器控制组件的所在之处。浏览器之所以将其置灰,是为了表明这部分是在 shadow DOM 里,对于页面的其他部分来说它是不可用的。这里的不可用意味着你写的 CSS 选择器和 JavaScript代码都不会影响到这部分内容。

必须的HelloWorld

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Shadow DOM -- Hello World</title>
</head>
<body>
    <div class="hi">你好Shadow DOM!</div>
    <script>
        var hi = document.querySelector('.hi');
        var shadowRoot = hi.createShadowRoot();
        var dom = document.createElement('p');
        dom = '《<content></content>》';
        shadowRoot.appendChild(dom);
    </script>
</body>
</html>

结果是这样子的

我们在helloworld中使用<content>标签,它的作用是在Shadow DOM中使用宿主的内容。

那么我能只显示其中一部分的内容吗? 答案是可以得,我们来看看下面的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Shadow DOM -- contentSelector</title>
</head>
<body>
    <helloworld>
        <span class="name">lonnyhuang</span>
        <span class="sex">男</span>
        <span class="city">深圳</span>
    </helloworld>
    <script type="tpl" class="sd-helloworld">
        <style>
            p {
                line-height: 20px;
                margin: 0;
            }
        </style>
        <p>姓名:<content select=".name"></content></p>
        <p>性别:<content select=".sex"></content></p>
        <p>所在城市:<content select=".city"></content></p>
    </script>
    <script>
        var host = document.querySelector('helloworld');
        var shadowRoot = host.createShadowRoot();
        shadowRoot = document.querySelector('.sd-helloworld');
    </script>
</body>
</html>

这里要用到<content>标签的select属性。为了方便这里直接用script标签做模板。可以看到对应的标签映射到了select选择器对应的位置

这里仅仅简单介绍了Shadow DOM的v0版本api。有人总结了v1版本和v0的不同点。其中提到也可以用slot来做选择宿主的子节点的选择器,试了一下我的chrome还没有支持 地址在这里:http://hayato.io/2016/shadowdomv1/

参考资料

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Micro_awake web

谈谈html中一些比较"偏门"的知识(map&area;iframe;label)

说明:这里所说的"偏门"只是相对于本人而言,记录在此,加深印象。也希望有需要的朋友能获得些许收获! 1.空元素(void):没有内容的元素。 常见的有:<br>...

2266
来自专栏大数据钻研

使用CSS完成元素居中的七种方法

在网页上使 HTML 元素居中看似一件很简单的事情. 至少在某些情况下是这样的,但是复杂的布局往往使一些解决方案不能很好的发挥作用。 在网页布局中元素水平居中...

2534
来自专栏图像识别与深度学习

《HTML5实战》Lesson08

Week09    2016/11/09上午1-4节 一、完成文件编辑器浏览视图,代码3-1到3-3,效果如下图: ? 知识点如下: 1、display:bl...

2984
来自专栏非著名程序员

基础篇章:关于 React Native 之 ToolbarAndroid 组件的讲解

组件已经讲了不少了,相信大家对React Native都已经有了很多了解和自己的理解了,相信聪明的开发者已经发现了,这些组件的用法和我们原生开发中控件都是类似的...

20410
来自专栏進无尽的文章

绘图-视图遮罩MaskView的使用

可以这样理解,是将maskView每个point的alpha赋值给View的重叠部分相对应的point,这样view的重叠每个point都有个alpha值了,v...

1122
来自专栏互联网软件技术

本地多图上传预览

1672
来自专栏Ray学习笔记

Jump Start Bootstrap 第3章

在这一章,我们将开始使用Bootstrap的一些非常有用的HTML组件。诸如按钮、标题(headers)、导航菜单和评论系统的组件经常被用在网站上。通过组件,B...

842
来自专栏IMWeb前端团队

自定义字体

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 概述 一般来说,网页上的字体使用的都是我们电脑里面的字体,比如我们常说的微软...

33510
来自专栏游戏杂谈

仿Google+相册的动画

鼠标移入、移出时均有动画效果,咋一看估计是使用了css3的transform属性来实现动画效果的。

1111
来自专栏前端儿

layer弹出层中H5播放器全屏出错解决 & 属性poster底图占满video的方法

所以,目前的解决办法是在layer层创建之后,移除这个class即可(注意在success回调中置于下一轮事件循环)

3331

扫码关注云+社区