Web Component超有用網頁模組化 - 顯示HTML imports中的內容

2019鐵人賽

lagagain

2018-10-19 22:32:49

5566 瀏覽

分享至

顯示HTML imports

從上一次嘗試可以知道，import的HTML的階層樣式表是會影響到主要DOM的，實際上Javascript也是一樣，所以還沒有像是程式語言命名空間或是package的概念，可以直接在被引入的HTML文件中加入javascript:alert("Hello")。

但是import的HTML的DOM內容並不會直接顯示出來。換而言之雖然CSS和Javascript沒被隔離，但是HTML是被隔離的。透過取得的link元素，會有一個import的屬性，其值就是被引入的HTML DOM，在透過原本就有的appendChild插入到顯示的DOM裏面。

部分範例

// 取得link元素
import_html = document.querySelector('link[rel="import"]');

// 取得import html的DOM，並取得期中想要插入的標籤節點
var child_dom_node = import_html.import.querySelector("#myheader");

// 插入到現有的DOM之中
document.body.appendChild(child_dom_node);

所以結合上次的hello.html，完整會是：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>for test</title>
  </head>
  <body>
    <link rel="import" href="./my-header.html">
    <h1>Hello World For Test</h1>
  </body>
  <script>

    var import_html = document.querySelector('link[rel="import"]');
    var child_dom_node = import_html.import.querySelector("#myheader");
    document.body.appendChild(child_dom_node);
  </script>
</html>

至於Shadow DOM和CustomElementRegister，我還需要在稍微瞭解一下。但簡單說，CustomElementRegister可以直接註冊新的tag，比如<my-tag></my-tag>來使用，我這才知道Vue.js中的有點像可能在chrome就是直接使用這個方法。Shadow DOM則就真的有一點命名空間的味道了，不知道CSS和Javascripte是不是也會被隔離。