唯品秀博客
首页 > 前端开发 > Javascript > Web Components之Custom Elements组件开发

Web Components之Custom Elements组件开发

2018年09月25日 唯品秀 1265次浏览

什么是Web Component?

Web Components 包含了多种不同的技术。你可以把Web Components当做是用一系列的Web技术创建的、可重用的用户界面组件的统称。Web Components使开发人员拥有扩展浏览器标签的能力,可以自由的进行定制组件。但截至本文时间,Web Components依然是W3C工作组的一个草案,并为被正式纳入标准,但这并不妨碍我们去学习它。

有时候关于Web Components和谷歌的plymer之间可能会存在一些困惑,简介而论,Polymer是基于Web Components技术的一个框架,你当然可以在不适用其的情况下开发Web Components

Web Components浏览器支持性

Web Components并没有被所有浏览器来实现(截止2017年chrome已经完全支持,其实其他标准浏览器现在也都支持),因此如果在不支持的浏览器上使用Web Components,
应该使用由google polymer开发的 polyfills来达到目的。使用之前最好通过Are We Componentized Yet查看浏览器兼容性。

Web组件

何为Web组件?Web组件相对于Web开发者来说并不陌生,Web组件是一套封装好的HTML,CSS,以及JavaScript,它最大的特点就是可复用。基本在每一个网站上我们都可以看到各式各样的组件,例如下拉菜单、按钮、图片滚播、日历控件等。慢着,既然我们已经可以实现web组件的封装,那Web Component这家伙出现的意义是什么呢?Web Component回答道:“你们的实现方式不够优雅也不够完美,还是看看我的吧”。

因为当我们使用各种编程技巧对组件进行封装时,一个无法规避的事实是,组件的内部是可被访问和影响的,例如我们对样式表进行改动时经常会担心影响到页面组件的样式。而通过Web Component封装出来的组件,我们可以选择让组件的内部隐藏起来,也就是说,组件内部是与世隔绝的!

Web Component的组成

  • ● Custom Elements
  • 一种可以允许开发者在document中定义并使用的新的dom元素类型,即自定义元素

  • ● HTML Templates
  • 模板没什么可说了,在标准实现之前其实我们一直都在用js来实现该方式

  • ● Shadow Dom
  • 一种可以在document下组合多个同级别并且可以项目作用的DOM树的方法,因此可以更好完善DOM的构成

  • ● HTML Imports
  • 一种允许一个html文档在别的htmldocuments中包含和复用的方法

    未完待续。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

    明确的文档定义如下:

  • ● 一种新的html元素: template
  • ● 关于 template 的接口: HTMLTemplateElement, HTMLContentElement (removed from spec) and HTMLShadowElement
  • ● HTMLLinkElement接口和 link 元素的扩展
  • ● 注册custom elements的接口:Document.registerElement()和对Document.createElement() and Document.createElementNS()的更新
  • ● 对html元素原型对象新增的生命周期回调
  • ● 默认为元素对象增加的新的css的伪类::unresolved
  • ● The Shadow DOM:ShadowRoot and Element.createShadowRoot(), Element.getDestinationInsertionPoints(), Element.shadowRoot
  • ● Event接口的扩展、Event.path
  • ● Document 接口的一些扩展
  • ● Web Components样式应用新的伪类::host, :host(), :host-context()
  • 如何使用

    接下看最直接的还是hello world 。直接上代码:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    //index.html
    <!DOCTYPE>
    <html>
        <head>
            <title>webcomponent</title>
            <link rel="import" href="./components/helloword.html" />
        </head>
        <body>
            <hellow-world></hellow-world>
        </body>
    </html>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    //helloworld.html
        <template>
        <style>
            .coloured {
                color: red;
            }
        </style>
        <p>the first webcompnent is  <strong class="coloured">Hello World</strong></p>
    </template>
    <script>
        (function() {
            // Creates an object based in the HTML Element prototype
            // 基于HTML Element prototype 创建obj
            var element = Object.create(HTMLElement.prototype);
            // 获取特tmplate的内容
            var template = document.currentScript.ownerDocument.querySelector('template').content;
            // element创建完成之后的回调
            element.createdCallback = function() {
                // 创建 shadow root
                var shadowRoot = this.createShadowRoot();
                // 向root中加入模板
                var clone = document.importNode(template, true);
                shadowRoot.appendChild(clone);
            };
            document.registerElement('hellow-world', {
                prototype: element
            });
        }());
    </script>

    最终效果图


    「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

    赞( 0 ) 打赏

    谢谢你请我吃鸡腿*^_^*

    支付宝
    微信
    0

    谢谢你请我吃鸡腿*^_^*

    支付宝
    微信

    上一篇:

    下一篇:

    共有 0 条评论 - Web Components之Custom Elements组件开发

    博客简介

    唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与 

    精彩评论

    友情链接

    他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!

    站点统计

    • 文章总数: 190 篇
    • 草稿数目: 2 篇
    • 分类数目: 13 个
    • 页面总数: 21 个
    • 评论总数: 876 条
    • 链接总数: 13 个
    • 标签总数: 371 个
    • 建站时间: 886 天
    • 注册用户: 690 人
    • 访问总量: 8673332 次
    • 最近更新: 2019年5月17日
    服务热线:
     173xxxx7240

     QQ在线交流

     旺旺在线