Web Components เบื้องต้น: สร้าง Custom Elements

ยินดีต้อนรับสู่บทสุดท้ายของซีรีส์ HTML สำหรับผู้เริ่มต้น! ในบทนี้ เราจะมาสำรวจโลกของ Web Components ซึ่งเป็นเครื่องมือที่ทรงพลังสำหรับการสร้างส่วนประกอบ UI ที่นำกลับมาใช้ใหม่ได้และเป็นอิสระจากเฟรมเวิร์กภายนอก

ก่อนหน้านี้ เราได้เรียนรู้เกี่ยวกับการสร้างโครงสร้างเว็บไซต์ด้วย HTML, การจัดรูปแบบด้วย CSS, และการทำให้เว็บไซต์ตอบสนองต่ออุปกรณ์ต่างๆ ด้วย Responsive Images ในบทนี้ เราจะต่อยอดความรู้เหล่านั้นด้วยการเรียนรู้วิธีสร้างองค์ประกอบ HTML ของเราเอง!

Web Components คืออะไร?

Web Components คือชุดของมาตรฐานเว็บที่ช่วยให้คุณสร้างองค์ประกอบ HTML ที่นำกลับมาใช้ใหม่ได้ (Reusable HTML Elements) พร้อมทั้ง encapsulation (การห่อหุ้ม) และ modularity (ความเป็นโมดูล) ทำให้คุณสามารถสร้างส่วนประกอบ UI ที่ทำงานได้เหมือนกับองค์ประกอบ HTML มาตรฐาน เช่น <button> หรือ <input> แต่มีความยืดหยุ่นและปรับแต่งได้มากกว่า

ประโยชน์ของ Web Components:

• Reusable: สร้างครั้งเดียว ใช้ได้หลายที่ในโปรเจกต์ หรือแม้แต่ในโปรเจกต์อื่นๆ
• Encapsulated: ส่วนประกอบแต่ละชิ้นทำงานอย่างอิสระ ไม่กระทบกับส่วนอื่นๆ ของเว็บไซต์
• Interoperable: ทำงานร่วมกับเฟรมเวิร์ก JavaScript ต่างๆ เช่น React, Angular, Vue.js หรือแม้แต่ Vanilla JavaScript
• Customizable: สามารถปรับแต่งลักษณะและพฤติกรรมของส่วนประกอบได้ตามต้องการ

Web Components ประกอบด้วย 3 เทคโนโลยีหลัก:

1. Custom Elements: API ที่ช่วยให้คุณกำหนดองค์ประกอบ HTML ของคุณเอง
2. Shadow DOM: API ที่ช่วยให้คุณสร้าง DOM ที่ห่อหุ้มสำหรับส่วนประกอบของคุณ
3. HTML Templates: องค์ประกอบ <template> ที่ช่วยให้คุณกำหนดโครงสร้าง HTML ที่สามารถนำกลับมาใช้ใหม่ได้

ในบทนี้ เราจะเน้นที่การใช้ Custom Elements API และ Shadow DOM เพื่อสร้าง custom elements อย่างง่าย

การใช้ Custom Elements API

Custom Elements API ช่วยให้เราสามารถกำหนดองค์ประกอบ HTML ใหม่ได้ โดยการสร้างคลาส JavaScript ที่สืบทอดมาจาก HTMLElement และลงทะเบียนคลาสนั้นกับเบราว์เซอร์

ขั้นตอนการสร้าง Custom Element:

1. สร้างคลาส JavaScript: สร้างคลาสที่สืบทอดมาจาก HTMLElement
2. กำหนด Lifecycle Callbacks (Optional): กำหนดฟังก์ชันพิเศษ (lifecycle callbacks) เช่น connectedCallback, disconnectedCallback, attributeChangedCallback เพื่อจัดการเหตุการณ์ต่างๆ ที่เกิดขึ้นกับองค์ประกอบ
3. ลงทะเบียน Custom Element: ใช้ฟังก์ชัน customElements.define() เพื่อลงทะเบียนคลาสของคุณกับเบราว์เซอร์ โดยกำหนดชื่อขององค์ประกอบ (custom element tag) และคลาสที่เกี่ยวข้อง

ตัวอย่าง: การสร้าง Custom Element ชื่อ <my-greeting>

class MyGreeting extends HTMLElement {
  constructor() {
    super(); // เรียก constructor ของ HTMLElement
    this.textContent = "สวัสดีชาวโลก!";
  }
}

customElements.define('my-greeting', MyGreeting);

คำอธิบาย:

• class MyGreeting extends HTMLElement: สร้างคลาส MyGreeting ที่สืบทอดมาจาก HTMLElement ซึ่งทำให้คลาสนี้เป็น Custom Element
• constructor(): เป็นฟังก์ชัน constructor ของคลาส MyGreeting ที่ถูกเรียกเมื่อสร้างอินสแตนซ์ขององค์ประกอบ
• super(): เรียก constructor ของคลาสแม่ (HTMLElement) ซึ่งจำเป็นต้องทำเสมอ
• this.textContent = "สวัสดีชาวโลก!";: กำหนดข้อความที่จะแสดงภายในองค์ประกอบ
• customElements.define('my-greeting', MyGreeting);: ลงทะเบียน Custom Element ชื่อ my-greeting กับคลาส MyGreeting

การใช้งาน:

<my-greeting></my-greeting>

เมื่อเบราว์เซอร์พบแท็ก <my-greeting> มันจะสร้างอินสแตนซ์ของคลาส MyGreeting และแสดงข้อความ "สวัสดีชาวโลก!"

การสร้าง Shadow DOM

Shadow DOM คือ DOM ที่ห่อหุ้ม (encapsulated) ซึ่งซ่อนอยู่ภายใน Custom Element ทำให้ CSS และ JavaScript ภายนอกไม่สามารถเข้าถึงหรือแก้ไข DOM ภายใน Shadow DOM ได้ ซึ่งช่วยป้องกันการชนกันของสไตล์และพฤติกรรมที่ไม่คาดคิด

การสร้าง Shadow DOM:

ใช้เมธอด attachShadow() ของ HTMLElement เพื่อสร้าง Shadow DOM สำหรับ Custom Element

class MyGreeting extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' }); // สร้าง Shadow DOM
    shadow.textContent = "สวัสดีชาวโลก! (Shadow DOM)";
  }
}

customElements.define('my-greeting', MyGreeting);

คำอธิบาย:

• this.attachShadow({ mode: 'open' }): สร้าง Shadow DOM และกำหนด mode เป็น 'open' ซึ่งหมายความว่าเราสามารถเข้าถึง Shadow DOM จาก JavaScript ภายนอกได้โดยใช้ element.shadowRoot
• shadow.textContent = "สวัสดีชาวโลก! (Shadow DOM)";: กำหนดข้อความที่จะแสดงภายใน Shadow DOM

Trade-off ของ Shadow DOM:

• Isolation: Shadow DOM สร้างขอบเขตที่แยกส่วนประกอบออกจากสไตล์และสคริปต์ภายนอก ซึ่งช่วยป้องกันปัญหาความขัดแย้งของสไตล์และการทำงาน
• Complexity: การทำงานกับ Shadow DOM อาจซับซ้อนกว่า DOM ทั่วไปเล็กน้อย เนื่องจากต้องใช้เมธอดพิเศษในการเข้าถึงและแก้ไของค์ประกอบภายใน Shadow DOM
• Accessibility: การจัดการ accessibility (การเข้าถึงได้) ใน Shadow DOM อาจต้องใช้ความระมัดระวังเป็นพิเศษเพื่อให้แน่ใจว่าผู้ใช้ทุกคนสามารถใช้งานส่วนประกอบได้อย่างถูกต้อง

ตัวอย่างการใช้ Shadow DOM กับ CSS:

<style>
  my-greeting {
    color: blue; /* สไตล์นี้จะไม่มีผลต่อข้อความภายใน Shadow DOM */
  }
</style>

<my-greeting></my-greeting>

<script>
  class MyGreeting extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
      const text = document.createElement('p');
      text.textContent = "สวัสดีชาวโลก! (Shadow DOM)";
      text.style.color = "red"; // สไตล์นี้มีผลต่อข้อความภายใน Shadow DOM
      shadow.appendChild(text);
    }
  }

  customElements.define('my-greeting', MyGreeting);
</script>

ในตัวอย่างนี้ CSS ภายนอกที่กำหนดสีของ <my-greeting> เป็นสีน้ำเงิน จะไม่มีผลต่อข้อความที่แสดงภายใน Shadow DOM เนื่องจาก Shadow DOM สร้างขอบเขตที่แยก CSS ออกจากกัน แต่เราสามารถกำหนดสไตล์ให้กับข้อความภายใน Shadow DOM ได้โดยตรงผ่าน JavaScript

สรุป

ในบทนี้ เราได้เรียนรู้พื้นฐานเกี่ยวกับ Web Components โดยเน้นที่การสร้าง Custom Elements และการใช้ Shadow DOM เพื่อสร้างส่วนประกอบ UI ที่นำกลับมาใช้ใหม่ได้และเป็นอิสระจากเฟรมเวิร์กภายนอก Web Components เป็นเครื่องมือที่ทรงพลังสำหรับการสร้างเว็บไซต์ที่ทันสมัยและ maintainable

ถึงแม้ว่านี่จะเป็นเพียงจุดเริ่มต้น แต่หวังว่าบทนี้จะเป็นแรงบันดาลใจให้คุณสำรวจโลกของ Web Components ต่อไป! ขอให้สนุกกับการสร้างองค์ประกอบ HTML ของคุณเอง!

ขอขอบคุณที่ติดตามซีรีส์ HTML สำหรับผู้เริ่มต้นจนจบ! หวังว่าคุณจะได้รับความรู้และทักษะที่จำเป็นในการสร้างเว็บไซต์ที่ยอดเยี่ยม!