Web ComponentWeb组件入门


备注

本节概述了Web组件是什么,以及开发人员可能希望使用它们的原因。

Web Components是一组在现代Web浏览器中实现的新Web技术,用于在HTML,JavaScript和CSS的帮助下设计可重用的Web元素。

Web Compoments一词涵盖的主题是:

  • 自定义元素

  • HTML模板

  • 暗影DOM

  • HTML导入

这些技术是互补的,可以一起使用或单独使用。

版本

组件规格最后发布
HTML模板 W3C HTML5推荐标准 2014年10月28日
自定义元素 W3C工作草案或WHATWG HTML和DOM生活标准 2016年10月13日
暗影DOM W3C工作草案或WHATWG HTML和DOM生活标准 2017年1月16日
HTML导入 W3C工作草案 2016年2月25日

可用性

本机实现

<template> 元素在每个现代浏览器中实现:

  • 铬,
  • 边缘,
  • 火狐,
  • 歌剧,
  • 苹果浏览器,
  • ...

自定义元素customElements.define() ,Shadow DOM attachShadow() 和HTML Imports <link rel="import"> 在最新版本的Chrome和Opera中实现。

Polyfills

对于其他浏览器,您可以使用polyfill库:

自定义元素 - Hello World

创建一个名为<hello-world> 的新HTML标记,它将显示“Hello,World!”:

<script>
//define a class extending HTMLElement
class HelloWorld extends HTMLElement {
    connectedCallback () {
      this.innerHTML = 'Hello, World!'
    }
}

//register the new custom element
customElements.define( 'hello-world', HelloWorld )
</script>

<!-- make use the custom element -->
<hello-world></hello-world>
 

Hello World示例

此示例将自定义元素,模板,Shadow DOM和HTML导入组合在一起,以显示“Hello,World!” HTML中的字符串。

在文件hello-world.html

<!-- 1. Define the template -->
<template>
   Hello, World!
</template>

<script>
  var template = document.currentScript.ownerDocument.querySelector( 'template' )   

  //2. Define the custom element
  
  customElements.define( 'hello-world', class extends HTMLElement 
  {
      constructor() 
      {
          //3. Create a Shadow DOM
          var sh = this.attachShadow( { mode: 'open' } )
          sh.appendChild( document.importNode( template.content, true ) )
     }
  } )
</script>
 

在主文件index.html

<html>
<head>
    <!-- 4. Import the HTML component --> 
    <link rel="import" href="hello-world.html">
</head>
<body>
    <hello-world></hello-world>      
</body>
</html>
 

HTML导入 - Hello World

导入一个HTML文件,该文件将添加一个div为“Hello,World!”在主文档的DOM树的末尾。

导入的文件hello.html

<script>
   var div = document.createElement( 'div' )
   div.innerHTML = 'Hello, World!'
   document.body.appendChild( div )
</script>
 

主文件index.html

<html>
  <link rel="import" href="hello.html">
 

HTML模板 - Hello World

使用<template> 元素设计HTML模板,然后可以在代码中重用该模板。

<template id="Template1">
    Hello, World !
<template>

<div id="Target1"></div>

<script>
   Target1.appendChild( Template1.content.cloneNode( true ) )
</script>
 

这将在#Target1 div中插入模板的内容。

Shadow DOM - Hello World

将阴影DOM添加到将显示“Hello,World!”的div 而不是它的初始内容。

<div id="Div1">intial content</div>

<script>
   var shadow = Div1.attachShadow( { mode: 'open' } )
   shadow.innerHTML = "Hello, World!" 
</script>