专栏首页IMWeb前端团队webcomponent学习笔记(一)

webcomponent学习笔记(一)

本文作者:IMWeb 黄龙 原文出处:IMWeb社区 未经同意,禁止转载

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

可以戳这里 http://git.360rush.com/demo/shadowDom/helloworld.html

<!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中使用宿主的内容。

那么我能只显示其中一部分的内容吗? 答案是可以得,我们来看看下面的例子 http://git.360rush.com/demo/shadowDom/contentSelector.html

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

相关文章

  • webcomponent学习笔记(一)

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

    IMWeb前端团队
  • Shadow DOM 初探

    Shadow DOM用官方的翻译来说就是影子 DOM,他能够为Web组件中的 DOM和 CSS提供了封装,实际上是在浏览器渲染文档的时候会给指定的DOM结构插入...

    IMWeb前端团队
  • react组件性能优化探索实践

    React本身就非常关注性能,其提供的虚拟DOM搭配上Diff算法,实现对DOM操作最小粒度的改变也是非常的高效。然而其组件渲染机制,也决定了在对组件进行更新时...

    IMWeb前端团队
  • AndroidStudio开发利器--常用插件

    阿凯
  • GO

    被称为GO语言之父的Rob Pike说,你是否同意GO语言,取决于你是认可少就是多,还是少就是少(Less is more or less is less)。R...

    马哥教育小师哥
  • 【小家Spring】Spring贡献的多个注解相关的工具类:AnnotationUtils、AnnotatedElementUtils、AnnotationConfigUtils...

    本文主要聊聊Spring提供的多个关于注解相关的工具类:AnnotationUtils和AnnotatedElementUtils等等 因为很多逻辑都封装在了...

    YourBatman
  • GEO数据挖掘6

    使用SigDB(Molecular Signatures Database)基因集进行富集分析,包含8个系列

    用户7760819
  • 手把手教你开发微信公众号后台

    松哥原创的 Spring Boot 视频教程已经杀青,感兴趣的小伙伴戳这里-->Spring Boot+Vue+微人事视频教程

    江南一点雨
  • 一文读懂基于神经网络的图片风格转移

    将A图片的风格转移到B图片上,指的是将A图片的抽象艺术风格(如线条、色彩等等)和B图片的内容框架合成为一幅图。自然地,A图片称为风格图,而B图片就称为内容图。就...

    AI科技大本营
  • 图片风格转移A Neural Algorithm of Artistic Style

    这篇论文的目的,如下图所示。把我们的图变成梵高的风格,厉害了~ ? 上图为原图,下图为调整后的图 传统图像风格迁移的过程是:分析图像风格(比如说梵高的星空这种蓝...

    水球喵子

扫码关注云+社区

领取腾讯云代金券