Web組件簡介

時間 2019-12-05

標籤 web 組件簡介欄目 HTML 简体版

原文原文鏈接

Web組件是什麼？

Web組件由三個獨立的技術組成：html

自定義元素。很簡單，這些是徹底有效的HTML元素，包含使用一組JavaScript API製做的自定義模板，行爲和標記名稱（例如，<one-dialog>）。自定義元素在HTML Living Standard規範中定義。
Shadow DOM。可以隔離CSS和JavaScript，例如一個<iframe>。這在Living Standard DOM規範中定義。
HTML模板。HTML中用戶定義的模板，在調用以前不會呈現。<template>標籤在HTML Living Standard規範中定義。

這些是構成Web組件規範的內容。git

HTML模塊( HTML Modules)多是堆棧中的第四種技術，但它還沒有在四大瀏覽器中實現。Chrome團隊已宣佈有意在將來版本中實施這些內容。

除Microsoft Edge和Internet Explorer 11外，Web組件一般可在全部主流瀏覽器中使用，但也有工具能夠填充這些空白。github

每種技術能夠獨立使用或與任何其餘技術組合使用。換句話說，它們並非相互排斥的。web

Custom elements(自定義元素)

顧名思義，自定義元素是HTML元素，如<div>，<section>或<article>，但咱們能夠經過瀏覽器API定義本身的名稱。自定義元素就像那些標準的HTML元素，如<news-slider>或<bacon-cheeseburger>。展望將來，瀏覽器供應商已承諾不會在名稱中建立包含短劃線的新內置元素以防止衝突。瀏覽器

自定義元素包含本身的語義，行爲，標記，能夠跨框架和瀏覽器共享。app

JS

class MyComponent extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<h1>Hello world</h1>`;
  }
}
    
customElements.define('my-component', MyComponent);

HTMl

<my-component></my-component>

Result
Hello world

在這個例子中，咱們定義了<my-component>，咱們本身的HTML元素。不能否認，它沒有作太多，但這是自定義元素的基本構建塊。全部自定義元素必須以某種方式擴展HTMLElement才能在瀏覽器中註冊。框架

存在沒有第三方框架的自定義元素，瀏覽器供應商致力於規範的持續向後兼容性，除了保證根據規範編寫的組件不會破壞API更改。更重要的是，這些組件一般能夠與現有最流行的框架一塊兒使用，包括Angular，React，Vue等，只須要不多的工做量dom

Shadow DOM

shadow DOM是DOM的封裝版本。這容許做者有效地將DOM片斷彼此隔離，包括能夠用做CSS選擇器的任何東西以及與它們相關聯的樣式。一般，文檔範圍內的任何內容都稱爲light DOM，而shadow root中的任何內容都稱爲shadow DOM。ide

使用light DOM時，可使用document.querySelector（'selector'）或經過使用element.querySelector（'selector'）定位任何元素的子元素來選擇元素;以一樣的方式，能夠經過調用shadowRoot.querySelector來定位影子根的子節點，其中shadowRoot是對文檔片斷的引用 - 不一樣之處在於影子根的子節點不能從輕型DOM中選擇。例如，若是咱們在其中有一個帶有<button>的影子根，則調用shadowRoot.querySelector（'button'）將返回咱們的按鈕，可是不調用該文檔的查詢選擇器將返回該元素，由於它屬於不一樣的DocumentOrShadowRoot實例。樣式選擇器以相同的方式工做。工具

在這方面，影子DOM的工做相似於<iframe>，其中內容與文檔的其他部分隔離;可是，當咱們建立一個影子根時，咱們仍然能夠徹底控制頁面的那一部分，可是做用於上下文。這就是咱們所說的封裝。

若是您曾編寫太重用相同內容的組件或依賴於CSS-in-JS工具或CSS命名策略（如BEM），那麼shadow DOM有可能改善您的開發人員體驗。

想象一下如下場景：

<div>
  <div id="example">
    <!-- Pseudo-code used to designate a shadow root -->
    <#shadow-root>
      <style>
      button {
        background: tomato;
        color: white;
      }
      </style>
      <button id="button">This will use the CSS background tomato</button>
    </#shadow-root>
  </div>
  <button id="button">Not tomato</button>
</div>

除了<＃shadow-root>的僞代碼（此處用於劃分沒有HTML元素的陰影邊界），HTML徹底有效。要將陰影根附加到上面的節點

相似於：

const shadowRoot = document.getElementById('example').attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `<style>
button {
  color: tomato;
}
</style>
<button id="button">This will use the CSS color tomato <slot></slot></button>`;

HTML templates

HTML <template>元素容許咱們在普通的HTML流程中刪除可重複使用的代碼模板，這些模板不會當即呈現，但能夠在之後使用。

HTML
<template id="book-template">
  <li><span class="title"></span> &mdash; <span class="author"></span></li>
</template>

<ul id="books"></ul>

上面的示例在腳本使用模板以前不會呈現任何內容，實例化後代碼將告訴瀏覽器如何處理它。

JS
const fragment = document.getElementById('book-template');
const books = [
  { title: 'The Great Gatsby', author: 'F. Scott Fitzgerald' },
  { title: 'A Farewell to Arms', author: 'Ernest Hemingway' },
  { title: 'Catch 22', author: 'Joseph Heller' }
];

books.forEach(book => {
  // Create an instance of the template content
  const instance = document.importNode(fragment.content, true);
  // Add relevant content to the template
  instance.querySelector('.title').innerHTML = book.title;
  instance.querySelector('.author').innerHTML = book.author;
  // Append the instance ot the DOM
  document.getElementById('books').appendChild(instance);
});