Web Components มาตรฐานใหม่ของ Web

Published in

Zarewoft

2 min readApr 3, 2017

Web Components คืออะไร

Web Components คือ ชุดคำสั่ง APIs ของ web platform ที่ทำให้เราสามารถสร้างและใช้ HTML tag ที่ถูกปรับแต่งขึ้นมาในเว็บเพจและเว็บแอพของเราได้ ซึ่งตัว HTML tag ที่เราสร้างขึ้นมาใหม่นี่จะถูกเรียกว่า custom component, custom element หรือ widget ซึ่งสามารถใช้ได้กับ browser สมัยใหม่ และสามารถนำไปใช้ร่วมกับ Javascript library ตัวอื่นหรือ framework อื่นๆที่ทำงานร่วมกับ HTML ได้

Web components เป็นมาตรฐานใหม่ที่ถูกเพิ่มขึ้นจากมาตรฐานเดิมของ web ตอนนี้ฟีเจอร์ที่รองรับการใช้งาน web components กำลังถูกเพิ่มเข้าไปในมาตรฐานของ HTML และ DOM เรื่อยๆ ในอนาคตอันใกล้เราจะสามารถสร้างและใช้ custom component ได้บนทุก browser

Specifications

Web Components ทำงานอยู่บน 4 สเปคหลัก

Custom Elements
Custom Elements specification เป็นพื้นฐานของการออกแบบและการใช้ DOM elements ประเภทใหม่ๆ

Shadow DOM
shadow DOM specification ระบุวิธีการใช้ style และ markup ที่ถูกหุ้มอยู่ใน web components

HTML imports
HTML imports specification ระบุการนำเข้าและใช้ซ้ำของ HTML documents ใน HTML documents อื่นๆ

HTML Template
HTML template element specification ระบุการประกาศบางส่วนของ markup ที่ไม่ได้ถูกใช้ตอนหน้าเพจถูกโหลดแต่สามารถถูกสร้างขึ้นมาทีหลังตอนที่หน้าเว็บทำงานแล้ว

Web component ใช้ยังไง?

สามารถหา HTML elements ที่คนอื่นทำไว้แล้วและสามารถนำมาใช้ได้จาก https://www.webcomponents.org ครับ

การนำเข้าและการใช้ custom element นั้นง่ายมาก ยกตัวอย่างการใช้ Emoji Rain element

<link rel="import" href="../emoji-rain/emoji-rain.html">
...
<emoji-rain active></emoji-rain>

วิธีการติดตั้ง custom elements นั้นมีหลากหลายวิธีมาก ให้ลองดูใน README ของ element ที่คุณจะใช้ครับในนั้นจะมีวิธีการติดตั้งอยู่

Elements ส่วนใหญ่จะสามารถติดตั้งได้ผ่าน Bower ครับ เนื่องจาก Bower รองรับการช่วยติดตั้ง dependencies ของ custom element นั้นๆ สามารถดูรายละเอียดเพิ่มเติมของ Bower ได้ที่นี่ครับ Bower.io

อย่างใน Emoji Rain README ก็จะมีวิธีการติดตั้งผ่าน Bower อธิบายเอาไว้ครับ

mkdir emoji-rain-demo && cd emoji-rain-demo
bower install emoji-rain

สร้าง Web Component

บทความนี้เป็นการอธิบายการสร้าง web component เบื้องต้นครับ ดังนั้นจะไม่ได้ลงรายละเอียดลึกๆ

medium.com

Keep calm and #UseThePlatform
บทความนี้ถูกแปลมาจาก https://www.webcomponents.org/introduction

ช่วงโฆษณาครับ

สัญลักษณ์ Web Component (ซ้าย) และ สัญลักษณ์ Polymer (ขวา)

ใครสนใจ Web Component สามารถ Join Facebook group Polymer and Web Component Developer Thailand ใน Facebook เพื่อมาคุยกันได้นะครับ

ปล. Web Component สามารถเอาไปใช้กับทุกเฟรมเวิคได้หมดนะ Angular, React, Vue ฯลฯ ใช้ร่วมกันได้หมดเลย