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 条评论
登录 后参与评论

相关文章

来自专栏mini188

学习笔记:delphi之TStringGrid

1、说明 最近加入了一个项目组,使用的开发工具是delphi6,想想又要开始搞这个工具有点小忧伤,但没办法谁让咱就是个打杂的尼。。。 的需求是显示一个类似于Wo...

1895
来自专栏前端布道

CSS3实现多样的边框效果

681
来自专栏前端说吧

布局的诡异bug合集+解决方法(更新中)

2736
来自专栏Web项目聚集地

CSS 3D的魅力

最近玩了玩用css来构建3D效果,写了几个demo,所以博客总结一下。 在阅读这篇博客之前,请先自行了解一下css 3D的属性,例如:transform-st...

614
来自专栏我是攻城师

关于opencv图片颜色不能正常在matplotlib中显示的问题

opencv默认的彩色图片的加载方式是按照BGR加载的,直接用opencv的函数展示是没有问题的,但是有时候我们想把多张图片放在一起展示,这时候用matplot...

691
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之overflow

1、Overflow基本属性   overflow:visible(默认)/hidden/scroll/auto/inherit;   visible:超出部分...

2765
来自专栏散尽浮华

Html之初体验

概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言。相当于定义统一的一套规则,大...

17910
来自专栏柠檬先生

css3 3d变换和动画——回顾

1.transform-style 属性指定嵌套原始是怎样在三维空间中呈现。   语法:transform-style: flat | preserve-3d ...

1827
来自专栏偏前端工程师的驿站

根据标准word模板生成word文档类库(开源)

前言     最近因项目需要要自定义标准word模板,并以编码方式操作word模板、填充数据和生成word文档,于是自己写了条小“内裤”来实现这个功能。该“内...

1896
来自专栏小狼的世界

如何让高度、宽度不定的容器保持水平、垂直居中

这个题目似乎解决的办法很多,JS是最能够确保各种浏览器中一致性的,但是仍然可以使用CSS的方式来解决。这个问题分解为两个方面,第一解决左右居中的问题,第二解决上...

812

扫码关注云+社区