[前端] Web Component

日期：
MDN Web Components
https://developer.mozilla.org/zh-CN/docs/Web/Web_Components

Web Components整理及分享
https://www.jianshu.com/p/e8994b92bb7a

Atag - Web Components 最佳實踐
http://taobaofed.org/blog/2018/10/31/a-tag/

使用web-component搭建企業級元件庫
https://juejin.im/post/5aefb7e66fb9a07aad176f50

2017，讓我們再來看看 Web Components 吧！
https://blog.techbridge.cc/2017/01/06/web-components/

Web Components(Can I use)
https://caniuse.com/#search=components


我們通常搭建元件庫的時候都是基於某一種框架(例如react、vue、angular等)去搭建， 比如ant-design是基於react搭建的UI組件庫，而ElementUI則是基於vue搭建的組件庫。雖然目前有相關工具提供框架之間的轉化服務，比如講vue元件轉化為react元件。 但是畢竟是不同的框架，有不同的標準。因此框架api發生變動，甚至是轉換開發框架，那麼你就需要重寫轉化邏輯， 顯然是另一種痛苦與不具備靈活性的。

Web Components旨在解決這些問題 — 它由四項主要技術組成，它們可以一起使用來創建封裝功能的定制元素，可以在你喜歡的任何地方重用，不必擔心代碼衝突。 
  • Custom elements（自訂元素）：一組JavaScript API，允許您定義custom elements及其行為，然後可以在您的使用者介面中按照需要使用它們。
  • Shadow DOM（影子DOM）：一組JavaScript API，用於將封裝的“影子”DOM樹附加到元素（與主文件DOM分開呈現）並控制其關聯的功能。通過這種方式，您可以保持元素的功能私有，這樣它們就可以被腳本化和樣式化，而不用擔心與文檔的其他部分發生衝突。
  • HTML templates（HTML範本）：<template> 和 <slot> 元素使您可以編寫不在呈現頁面中顯示的標記範本。然後它們可以作為自訂元素結構的基礎被多次重用。
  • HTML Imports（HTML導入）：一旦定義了自訂群組件，最簡單的重用它的方法就是使其定義細節保存在一個單獨的檔中，然後使用導入機制將其導入到想要實際使用它的頁面中。HTML 導入就是這樣一種機制，儘管存在爭議 — Mozilla 根本不同意這種方法，並打算在將來實現更合適的。

不過現實可是骨感的，由Can I use查現在各瀏覽器對Web Components規範的支援度，發現IE11與Edge都不支援，所以還需要使用polyfill來進行擴充，使各瀏覽器(包含至IE11)支援Web Components規範。


#Web Component, Javascript, CSS, HTML, DOM, polyfill組件, 元件, 共用

留言

張貼留言