web components 初识

2020-12-10 19:11:36

Web Components 的一些入门知识

是什么

是一个Web组件标准。Web Components通过一种标准化的非侵入的方式封装一个组件,每个组件能组织好它自身的HTML、CSS、JavaScript,并且不会干扰页面上的其他代码。

组成部分

包括以下四种技术(每种都可以被单独使用)

  • Templates
    • 模板。该元素的特点是其中的内容虽然会被浏览器解析(规范上这么说),但是并不会被真正的激活,例如脚本不会被执行,图片不会被加载,也不会被渲染到页面上。直到通过脚本把它激活。
    • 支持template标签和slot标签。slot标签支持动态替换模板中的HTML内容,它用name属性来作为唯一表示。template中的内容被插入到DOM之前,不会渲染,它可以放在document中的任何位置
  • Custom Elements
    • 一种可以允许开发者在 document 中定义并使用的新的 dom 元素类型,即自定义元素
    • 构造函数中可以指定多个不同的回调函数,它们将会在元素的不同生命时期被调用
      • connectedCallback:当 custom element首次被插入文档DOM时,被调用
      • disconnectedCallback:当 custom element从文档DOM中删除时,被调用
      • adoptedCallback:当 custom element被移动到新的文档时,被调用
      • attributeChangedCallback:当 custom element增加、删除、修改自身属性时,被调用
  • Shadow DOM
    • 一种可以在document下组合多个同级别并且可以项目作用的DOM树的方法
  • Imports
    • 一种允许一个 html 文档在别的 htmldocuments 中包含和复用的方法

示例代码


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <template>
    <style>
      .com {
        font-size: 20px;
      }
    </style>
    <div class="com">my component</div>
  </template>
  <body>
    <my-view></my-view>
    <script>
      (function () {
        // Creates an object based in the HTML Element prototype
        // 基于HTML Element prototype 创建obj
        var element = Object.create(HTMLElement.prototype);
        // 获取特mplate的内容
        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('my-view', {
          prototype: element,
        });
      })();
    </script>
  </body>
</html>
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-ND 3.0 许可协议。可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。

扫描下方二维码阅读当前文章

浏览器、微信扫码
微信小程序

评 论:

好文推荐
极客之路公众号
微信情报 更多 >
    每天进步一点点~