Web Components

时间 2019-11-06

标签 web components 栏目 HTML 繁體版

原文原文链接

Web Components是什么

Web Components是一个汇集html,css,js的一个可复用组件。
这样开发者就能够在网络上经过插件或组件的形式分享本身的代码片断(具备独立的功能)，也能够理解成web组件或插件。css

Web Components的组成要素

自定义元素
html模版
shadowDOM
HTML(组件)导入

shadowDOM是什么

定义：浏览器将模板、样式表、属性、JavaScript代码等，封装成一个独立的DOM元素。外部的设置没法影响到其内部，而内部的设置也不会影响到外部，与浏览器处理原生网页元素（好比<video>元素）的方式很像html

<!DOCTYPE html>
<html>
  <head>
     <title>Shadow DOM</title>
  
     <style>
       button {
          font: 18px Century Schoolbook;
          border: thin solid gray;
          background: rgba(200, 200, 200, 0.5);
          padding: 10px;
       }
     </style>
  </head>
  
  <body>
       
    <div class="container"></div>
 
    <script>
      var host = document.querySelector('.container');
      var root = host.createShadowRoot();
      root.innerHTML = '<p>How <em>you</em> doin?</p>'
    </script>
  </body>
</html>

独立的组件

组件有两种形式

非shadowDOM组件
shadowDOM组件

非shadowDOM组件

temp.htmlweb

<script>
  var proto = Object.create(HTMLElement.prototype);
 
  proto.createdCallback = function() {
    var name = this.getAttribute('name');
    this.innerHTML = '欢迎来到web组件, <b>' +
                     (name || '?') + '</b>';
  };
 
  document.registerElement('say-hi', {prototype: proto});
</script>

shadowDOM组件

temp2.html浏览器

<template id="t">
  <style>
    ::content > * {
      color: red;
    }
  </style>
  <span>I'm a shadow-element using Shadow DOM!</span>
  <content></content>
</template>
 
<script>
  (function() {
    // 指向被加载的网页
    var importDoc = document.currentScript.ownerDocument;
 
    // 定义并登记<shadow-element>
    var proto2 = Object.create(HTMLElement.prototype);
 
    proto2.createdCallback = function() {
      var template = importDoc.querySelector('#t');
      var clone = document.importNode(template.content, true);
      var root = this.createShadowRoot();
      root.appendChild(clone);
    };
 
    document.registerElement('shadow-element', {prototype: proto2});
  })();
</script>

知识点

HTMLElement.prototype：为自定义注册的元素指定原型
createdCallback：是实例生成时触发的hook
registerElement：注册自定义组件

组件引入

shadow.html网络

<link rel="import" href="temp.html"/>
<link rel="import" href="temp1.html"/>

直接经过link的方式引入app

1. web components
2. Web Components 简述
3. Web Components简述
4. # Web Components 全揽
5. web components试用
6. 初探 web components
7. Web Components 小榄
8. 【译】Web Components简介
9. Web Components之Custom Elements
10. 【Web Components】Web Components 的最新开发方法
更多相关文章...
• Web 标准 - 网站建设指南
• Web 词汇表 - 网站建设指南
• Tomcat学习笔记（史上最全tomcat学习笔记）
• Docker容器实战(八) - 漫谈 Kubernetes 的本质