Hello World 示例

Created: November-22, 2018

此示例將自定義元素，模板，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>