สร้าง Web Component

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

สำหรับใครที่ยังไม่รู้ว่า Web Component คืออะไร ลองอ่านบทความนี้ก่อนนะครับ

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

ทั้งบทความนี้จะเป็นการอธิบายด้วย syntax ของ Web Components specification เวอร์ชั่น v1 นะครับ

วิธีการสร้าง HTML element ใหม่

เราใช้ JavaScript ในการประกาศ HTML Element และ tag ใหม่ขึ้นมาซึ่งจะอยู่ใน global scope เลยครับ

ประกาศได้โดยการเรียก customElements.define() พร้อมกับ tag name ที่คุณต้องการสร้างและ Javascript class ที่ extends HTMLElement

ตัวอย่างการสร้าง drawer panel <app-drawer>

class AppDrawer extends HTMLElement {...}
window.customElements.define('app-drawer', AppDrawer);

เมื่อเราต้องการใช้ tag ใหม่ที่เราสร้างขึ้นมาก็แค่เรียก

<app-drawer></app-drawer>

การใช้ custom element ก็ไม่ต่างอะไรกับการใช้ <div> หรือ element อื่นๆเลยครับ ตัว custom element นี้สามารถทำงานได้เหมือน default element ได้ทุกอย่างเลย ทั้งการประกาศใช้บนเว็บเพจ การสร้างขึ้นจากคำสั่งของ JavaScript การผูก event listener และอื่นๆ

<script>
// Create with javascript
var newDrawer = document.createElement(‘app-drawer’);
// Add it to the page
document.body.appendChild(newDrawer);
// Attach event listeners
document.querySelector(‘app-drawer’).addEventListener(‘open’, function() {...});
</script>

การสร้างและใช้ shadow root

Shadow DOM คือฟีเจอร์ใหม่ของ DOM ที่มาช่วยในการสร้าง component ครับ เรามองได้ว่า shadow DOM นี่เป็นการแยกส่วนของ DOM ใน component เรากับ DOM อื่นๆ ออกจากกันครับ

Shadow root คือส่วนของ document ที่ติดอยู่กับ “host” element
การเอา shadow root ไปติดกับ “host” element ทำให้เราได้ shadow DOM ครับ
การเอา shadowRoot ไปติดกับ host หรือการสร้าง shadow DOM นี้ทำได้โดยเรียก element.attachShadow()

const header = document.createElement('header');
const shadowRoot = header.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<h1>Hello Shadow DOM</h1>'; // Could also use appendChild().
// header.shadowRoot === shadowRoot
// shadowRoot.host === header

หากต้องการศึกษาเพิ่มเติมเกี่ยวกับ shadow DOM แนะนำให้อ่านที่บทความนี้ครับ จะช่วยให้เข้าใจ shadow DOM มากยิ่งขึ้น ด้วยการเปรียบเทียบตัวอย่างการใช้งาน shadow DOM v0 และ v1 เปรียบเทียบกัน Hayato Ito’s comparison of v0 and v1 of the shadow DOM specification.

Libraries สำหรับสร้าง web components

ปัจจุบันมี library ที่ช่วยสร้าง web component หลายตัวเลยครับ นี่คือตัวอย่างของ library ที่ช่วยสร้าง web component

• Bosonic เป็นชุดของ components ที่ออกแบบมาตอบสนองความต้องการใช้ของ developer ครับ
• Polymer เป็น library ที่มีฟีเจอร์ช่วยสร้าง custom elements มากมายเลยครับ
• SkateJS เป็น JavaScript library สำหรับช่วยสร้าง web components ตัว library เองมีขนาดเล็กครับ
• X-Tag เป็น open source JavaScript library ที่มี interface สำหรับช่วยสร้าง component ครับ

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 ฯลฯ ใช้ร่วมกันได้หมดเลย