14 กันยายน 2568ไทย

เจาะลึกวงจรชีวิตของ Web Component ครอบคลุมการสร้าง การเชื่อมต่อ การเปลี่ยนแปลง attribute และการตัดการเชื่อมต่อของ custom element เรียนรู้วิธีสร้างคอมโพเนนต์ที่แข็งแกร่งและนำกลับมาใช้ใหม่ได้สำหรับเว็บแอปพลิเคชันสมัยใหม่

วงจรชีวิตของ Web Component: การสร้างและจัดการ Custom Element อย่างมืออาชีพ

Web component เป็นเครื่องมือที่ทรงพลังสำหรับการสร้าง UI element ที่สามารถนำกลับมาใช้ใหม่และมีการห่อหุ้ม (encapsulated) ในการพัฒนาเว็บสมัยใหม่ การทำความเข้าใจวงจรชีวิตของ web component เป็นสิ่งสำคัญอย่างยิ่งในการสร้างแอปพลิเคชันที่แข็งแกร่ง บำรุงรักษาง่าย และมีประสิทธิภาพสูง คู่มือฉบับสมบูรณ์นี้จะสำรวจขั้นตอนต่างๆ ของวงจรชีวิต web component พร้อมคำอธิบายโดยละเอียดและตัวอย่างที่นำไปใช้ได้จริง เพื่อช่วยให้คุณเชี่ยวชาญการสร้างและจัดการ custom element

Web Component คืออะไร?

Web component คือชุดของ Web Platform API ที่ช่วยให้คุณสร้าง custom HTML element ที่ใช้ซ้ำได้ พร้อมด้วยสไตล์และพฤติกรรมที่ถูกห่อหุ้มไว้ภายใน ประกอบด้วยเทคโนโลยีหลักสามอย่าง:

Custom Elements: ช่วยให้คุณสามารถกำหนดแท็ก HTML ของคุณเองและตรรกะ JavaScript ที่เกี่ยวข้องได้
Shadow DOM: ให้การห่อหุ้มโดยการสร้าง DOM tree แยกต่างหากสำหรับคอมโพเนนต์ เพื่อป้องกันไม่ให้สไตล์และสคริปต์จากเอกสารหลัก (global document) เข้ามารบกวน
HTML Templates: ช่วยให้คุณสามารถกำหนดส่วนย่อยของ HTML ที่ใช้ซ้ำได้ ซึ่งสามารถโคลนและแทรกเข้าไปใน DOM ได้อย่างมีประสิทธิภาพ

Web component ส่งเสริมการนำโค้ดกลับมาใช้ใหม่ ปรับปรุงความสามารถในการบำรุงรักษา และช่วยให้สามารถสร้างส่วนต่อประสานผู้ใช้ที่ซับซ้อนได้อย่างเป็นโมดูลและเป็นระเบียบ ได้รับการสนับสนุนจากเบราว์เซอร์หลักทั้งหมดและสามารถใช้กับ JavaScript framework หรือ library ใดก็ได้ หรือแม้กระทั่งใช้โดยไม่มี framework เลย

วงจรชีวิตของ Web Component

วงจรชีวิตของ web component กำหนดขั้นตอนต่างๆ ที่ custom element ต้องผ่านตั้งแต่การสร้างจนถึงการลบออกจาก DOM การทำความเข้าใจขั้นตอนเหล่านี้ช่วยให้คุณสามารถดำเนินการที่เฉพาะเจาะจงในเวลาที่เหมาะสม ทำให้มั่นใจได้ว่าคอมโพเนนต์ของคุณทำงานได้อย่างถูกต้องและมีประสิทธิภาพ

เมธอดหลักในวงจรชีวิตประกอบด้วย:

constructor(): constructor จะถูกเรียกเมื่อ element ถูกสร้างหรืออัปเกรด ที่นี่คือที่ที่คุณจะเริ่มต้นสถานะ (state) ของคอมโพเนนต์และสร้าง shadow DOM (หากจำเป็น)
connectedCallback(): ถูกเรียกใช้ทุกครั้งที่ custom element ถูกเชื่อมต่อกับ DOM ของเอกสาร เป็นที่ที่เหมาะสำหรับทำงานตั้งค่า เช่น การดึงข้อมูล การเพิ่ม event listener หรือการเรนเดอร์เนื้อหาเริ่มต้นของคอมโพเนนต์
disconnectedCallback(): ถูกเรียกทุกครั้งที่ custom element ถูกตัดการเชื่อมต่อจาก DOM ของเอกสาร ที่นี่คือที่ที่คุณควรล้างทรัพยากรต่างๆ เช่น การลบ event listener หรือการยกเลิก timer เพื่อป้องกันหน่วยความจำรั่ว (memory leaks)
attributeChangedCallback(name, oldValue, newValue): ถูกเรียกใช้ทุกครั้งที่ attribute ของ custom element ถูกเพิ่ม ลบ อัปเดต หรือแทนที่ ทำให้คุณสามารถตอบสนองต่อการเปลี่ยนแปลงของ attribute ของคอมโพเนนต์และอัปเดตพฤติกรรมของมันได้ตามนั้น คุณต้องระบุว่าต้องการสังเกตการณ์ attribute ใดโดยใช้ observedAttributes static getter
adoptedCallback(): ถูกเรียกทุกครั้งที่ custom element ถูกย้ายไปยังเอกสารใหม่ สิ่งนี้มีความเกี่ยวข้องเมื่อทำงานกับ iframe หรือเมื่อย้าย element ระหว่างส่วนต่างๆ ของแอปพลิเคชัน

เจาะลึกแต่ละเมธอดในวงจรชีวิต

1. constructor()

constructor เป็นเมธอดแรกที่ถูกเรียกเมื่อมีการสร้างอินสแตนซ์ใหม่ของ custom element ของคุณ เป็นที่ที่เหมาะสมที่สุดในการ:

เริ่มต้นสถานะภายในของคอมโพเนนต์
สร้าง Shadow DOM โดยใช้ this.attachShadow({ mode: 'open' }) หรือ this.attachShadow({ mode: 'closed' }) โดย mode จะกำหนดว่า Shadow DOM สามารถเข้าถึงได้จาก JavaScript ภายนอกคอมโพเนนต์ (open) หรือไม่ (closed) โดยทั่วไปแนะนำให้ใช้ open เพื่อให้ง่ายต่อการดีบัก
ผูก (bind) เมธอด event handler เข้ากับอินสแตนซ์ของคอมโพเนนต์ (โดยใช้ this.methodName = this.methodName.bind(this)) เพื่อให้แน่ใจว่า this จะอ้างอิงถึงอินสแตนซ์ของคอมโพเนนต์ภายใน handler

ข้อควรพิจารณาที่สำคัญสำหรับ Constructor:

คุณไม่ควรทำการจัดการ DOM ใดๆ ใน constructor เนื่องจาก element ยังไม่ได้เชื่อมต่อกับ DOM อย่างสมบูรณ์ และการพยายามแก้ไขอาจนำไปสู่พฤติกรรมที่ไม่คาดคิด ควรใช้ connectedCallback สำหรับการจัดการ DOM
หลีกเลี่ยงการใช้ attribute ใน constructor เนื่องจาก attribute อาจจะยังไม่พร้อมใช้งาน ควรใช้ connectedCallback หรือ attributeChangedCallback แทน
เรียก super() ก่อนเสมอ ซึ่งเป็นข้อบังคับหากคุณขยายคลาสมาจากคลาสอื่น (โดยทั่วไปคือ HTMLElement)

ตัวอย่าง:


class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    // Create a shadow root
    this.shadow = this.attachShadow({mode: 'open'});
    this.message = "Hello, world!";
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    alert(this.message);
  }
}

2. connectedCallback()

connectedCallback จะถูกเรียกเมื่อ custom element ถูกเชื่อมต่อกับ DOM ของเอกสาร ที่นี่เป็นที่หลักในการ:

ดึงข้อมูลจาก API
เพิ่ม event listener ให้กับคอมโพเนนต์หรือ Shadow DOM ของมัน
เรนเดอร์เนื้อหาเริ่มต้นของคอมโพเนนต์ลงใน Shadow DOM
สังเกตการณ์การเปลี่ยนแปลงของ attribute หากไม่สามารถสังเกตการณ์ได้ทันทีใน constructor

ตัวอย่าง:


class MyCustomElement extends HTMLElement {
  // ... constructor ...

  connectedCallback() {
    // Create a button element
    const button = document.createElement('button');
    button.textContent = 'Click me!';
    button.addEventListener('click', this.handleClick);
    this.shadow.appendChild(button);

    // Fetch data (example)
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.data = data;
        this.render(); // Call a render method to update the UI
      });
  }

  render() {
    // Update the Shadow DOM based on the data
    const dataElement = document.createElement('p');
    dataElement.textContent = JSON.stringify(this.data);
    this.shadow.appendChild(dataElement);
  }

  handleClick() {
      alert("Button clicked!");
  }
}

3. disconnectedCallback()

disconnectedCallback จะถูกเรียกเมื่อ custom element ถูกตัดการเชื่อมต่อจาก DOM ของเอกสาร ซึ่งเป็นสิ่งสำคัญสำหรับ:

การลบ event listener เพื่อป้องกันหน่วยความจำรั่ว
การยกเลิก timer หรือ interval ใดๆ
การปล่อยทรัพยากรใดๆ ที่คอมโพเนนต์กำลังถือครองอยู่

ตัวอย่าง:


class MyCustomElement extends HTMLElement {
  // ... constructor, connectedCallback ...

  disconnectedCallback() {
    // Remove the event listener
    this.shadow.querySelector('button').removeEventListener('click', this.handleClick);

    // Cancel any timers (example)
    if (this.timer) {
      clearInterval(this.timer);
    }

    console.log('Component disconnected from the DOM.');
  }
}

4. attributeChangedCallback(name, oldValue, newValue)

attributeChangedCallback จะถูกเรียกเมื่อใดก็ตามที่ attribute ของ custom element มีการเปลี่ยนแปลง แต่เฉพาะสำหรับ attribute ที่ระบุไว้ใน observedAttributes static getter เท่านั้น เมธอดนี้จำเป็นสำหรับ:

การตอบสนองต่อการเปลี่ยนแปลงค่าของ attribute และอัปเดตพฤติกรรมหรือรูปลักษณ์ของคอมโพเนนต์
การตรวจสอบความถูกต้องของค่า attribute

ประเด็นสำคัญ:

คุณต้องกำหนด static getter ที่ชื่อว่า observedAttributes ซึ่งจะคืนค่าเป็นอาร์เรย์ของชื่อ attribute ที่คุณต้องการสังเกตการณ์
attributeChangedCallback จะถูกเรียกใช้สำหรับ attribute ที่ระบุไว้ใน observedAttributes เท่านั้น
เมธอดนี้จะได้รับอาร์กิวเมนต์สามตัว: name ของ attribute ที่เปลี่ยนแปลง, oldValue, และ newValue
oldValue จะเป็น null หาก attribute นั้นเพิ่งถูกเพิ่มเข้ามาใหม่

ตัวอย่าง:


class MyCustomElement extends HTMLElement {
  // ... constructor, connectedCallback, disconnectedCallback ...

  static get observedAttributes() {
    return ['message', 'data-count']; // Observe the 'message' and 'data-count' attributes
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'message') {
      this.message = newValue; // Update the internal state
      this.renderMessage(); // Re-render the message
    } else if (name === 'data-count') {
      const count = parseInt(newValue, 10);
      if (!isNaN(count)) {
        this.count = count; // Update the internal count
        this.renderCount(); // Re-render the count
      } else {
        console.error('Invalid data-count attribute value:', newValue);
      }
    }
  }

  renderMessage() {
    // Update the message display in the Shadow DOM
    let messageElement = this.shadow.querySelector('.message');

    if (!messageElement) {
      messageElement = document.createElement('p');
      messageElement.classList.add('message');
      this.shadow.appendChild(messageElement);
    }

    messageElement.textContent = this.message;
  }

  renderCount(){
    let countElement = this.shadow.querySelector('.count');

    if(!countElement){
        countElement = document.createElement('p');
        countElement.classList.add('count');
        this.shadow.appendChild(countElement);
    }

    countElement.textContent = `Count: ${this.count}`;
  }
}

การใช้ attributeChangedCallback อย่างมีประสิทธิภาพ:

ตรวจสอบ Input: ใช้ callback เพื่อตรวจสอบค่าใหม่เพื่อให้แน่ใจว่าข้อมูลมีความสมบูรณ์
Debounce การอัปเดต: สำหรับการอัปเดตที่ใช้การคำนวณสูง ควรพิจารณาใช้ debouncing กับ handler การเปลี่ยนแปลง attribute เพื่อหลีกเลี่ยงการเรนเดอร์ซ้ำซ้อนมากเกินไป
พิจารณาทางเลือกอื่น: สำหรับข้อมูลที่ซับซ้อน ควรพิจารณาใช้ property แทน attribute และจัดการการเปลี่ยนแปลงโดยตรงภายใน property setter

5. adoptedCallback()

adoptedCallback จะถูกเรียกเมื่อ custom element ถูกย้ายไปยังเอกสารใหม่ (เช่น เมื่อย้ายจาก iframe หนึ่งไปยังอีก iframe หนึ่ง) นี่เป็นเมธอดในวงจรชีวิตที่ใช้ไม่บ่อยนัก แต่ก็สำคัญที่ต้องทราบเมื่อทำงานกับสถานการณ์ที่ซับซ้อนมากขึ้นที่เกี่ยวข้องกับบริบทของเอกสาร

ตัวอย่าง:


class MyCustomElement extends HTMLElement {
  // ... constructor, connectedCallback, disconnectedCallback, attributeChangedCallback ...

  adoptedCallback() {
    console.log('Component adopted into a new document.');
    // Perform any necessary adjustments when the component is moved to a new document
    // This might involve updating references to external resources or re-establishing connections.
  }
}

การกำหนด Custom Element

เมื่อคุณได้กำหนดคลาส custom element ของคุณแล้ว คุณต้องลงทะเบียนกับเบราว์เซอร์โดยใช้ customElements.define():


customElements.define('my-custom-element', MyCustomElement);

อาร์กิวเมนต์ตัวแรกคือชื่อแท็กสำหรับ custom element ของคุณ (เช่น 'my-custom-element') ชื่อแท็กต้องมีเครื่องหมายขีดกลาง (-) เพื่อหลีกเลี่ยงความขัดแย้งกับ element HTML มาตรฐาน

อาร์กิวเมนต์ตัวที่สองคือคลาสที่กำหนดพฤติกรรมของ custom element ของคุณ (เช่น MyCustomElement)

หลังจากกำหนด custom element แล้ว คุณสามารถใช้ใน HTML ของคุณได้เหมือนกับ element HTML อื่นๆ:


<my-custom-element message="Hello from attribute!" data-count="10"></my-custom-element>

แนวทางปฏิบัติที่ดีที่สุดสำหรับการจัดการวงจรชีวิตของ Web Component

ทำให้ constructor มีขนาดเล็ก: หลีกเลี่ยงการจัดการ DOM หรือการคำนวณที่ซับซ้อนใน constructor ใช้ connectedCallback สำหรับงานเหล่านี้
ล้างทรัพยากรใน disconnectedCallback: ลบ event listener, ยกเลิก timer และปล่อยทรัพยากรใน disconnectedCallback เสมอเพื่อป้องกันหน่วยความจำรั่ว
ใช้ observedAttributes อย่างชาญฉลาด: สังเกตการณ์เฉพาะ attribute ที่คุณต้องการตอบสนองจริงๆ เท่านั้น การสังเกตการณ์ attribute ที่ไม่จำเป็นอาจส่งผลต่อประสิทธิภาพ
พิจารณาใช้ library สำหรับการเรนเดอร์: สำหรับการอัปเดต UI ที่ซับซ้อน ควรพิจารณาใช้ library สำหรับการเรนเดอร์เช่น LitElement หรือ uhtml เพื่อทำให้กระบวนการง่ายขึ้นและปรับปรุงประสิทธิภาพ
ทดสอบคอมโพเนนต์ของคุณอย่างละเอียด: เขียน unit test เพื่อให้แน่ใจว่าคอมโพเนนต์ของคุณทำงานอย่างถูกต้องตลอดวงจรชีวิต

ตัวอย่าง: คอมโพเนนต์ตัวนับอย่างง่าย

ลองสร้างคอมโพเนนต์ตัวนับอย่างง่ายที่สาธิตการใช้วงจรชีวิตของ web component:


class CounterComponent extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.count = 0;
    this.increment = this.increment.bind(this);
  }

  connectedCallback() {
    this.render();
    this.shadow.querySelector('button').addEventListener('click', this.increment);
  }

  disconnectedCallback() {
    this.shadow.querySelector('button').removeEventListener('click', this.increment);
  }

  increment() {
    this.count++;
    this.render();
  }

  render() {
    this.shadow.innerHTML = `
      <p>Count: ${this.count}</p>
      <button>Increment</button>
    `;
  }
}

customElements.define('counter-component', CounterComponent);

คอมโพเนนต์นี้จะเก็บตัวแปร count ภายในและอัปเดตการแสดงผลเมื่อมีการคลิกปุ่ม connectedCallback จะเพิ่ม event listener และ disconnectedCallback จะลบมันออก

เทคนิค Web Component ขั้นสูง

1. การใช้ Property แทน Attribute

ในขณะที่ attribute มีประโยชน์สำหรับข้อมูลอย่างง่าย แต่ property ให้ความยืดหยุ่นและความปลอดภัยของชนิดข้อมูล (type safety) มากกว่า คุณสามารถกำหนด property บน custom element ของคุณและใช้ getter และ setter เพื่อควบคุมวิธีการเข้าถึงและแก้ไข


class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this._data = null; // Use a private property to store the data
  }

  get data() {
    return this._data;
  }

  set data(value) {
    this._data = value;
    this.renderData(); // Re-render the component when the data changes
  }

  connectedCallback() {
    // Initial rendering
    this.renderData();
  }

  renderData() {
    // Update the Shadow DOM based on the data
    this.shadow.innerHTML = `<p>Data: ${JSON.stringify(this._data)}</p>`;
  }
}

customElements.define('my-data-element', MyCustomElement);

จากนั้นคุณสามารถตั้งค่า property data ได้โดยตรงใน JavaScript:


const element = document.querySelector('my-data-element');
element.data = { name: 'John Doe', age: 30 };

2. การใช้ Event สำหรับการสื่อสาร

Custom event เป็นวิธีที่ทรงพลังสำหรับ web component ในการสื่อสารกันเองและกับโลกภายนอก คุณสามารถส่ง (dispatch) custom event จากคอมโพเนนต์ของคุณและดักฟัง (listen) event เหล่านั้นในส่วนอื่นๆ ของแอปพลิเคชันของคุณได้


class MyCustomElement extends HTMLElement {
  // ... constructor, connectedCallback ...

  dispatchCustomEvent() {
    const event = new CustomEvent('my-custom-event', {
      detail: { message: 'Hello from the component!' },
      bubbles: true, // Allow the event to bubble up the DOM tree
      composed: true // Allow the event to cross the shadow DOM boundary
    });

    this.dispatchEvent(event);
  }
}

customElements.define('my-event-element', MyCustomElement);

// Listen for the custom event in the parent document
document.addEventListener('my-custom-event', (event) => {
  console.log('Custom event received:', event.detail.message);
});

3. การจัดสไตล์ Shadow DOM

Shadow DOM ให้การห่อหุ้มสไตล์ (style encapsulation) ป้องกันไม่ให้สไตล์รั่วไหลเข้าหรือออกจากคอมโพเนนต์ คุณสามารถจัดสไตล์ web component ของคุณโดยใช้ CSS ภายใน Shadow DOM ได้

สไตล์แบบ Inline:


class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.shadow.innerHTML = `
      <style>
        p {
          color: blue;
        }
      </style>
      <p>This is a styled paragraph.</p>
    `;
  }
}

Stylesheet ภายนอก:

คุณยังสามารถโหลด stylesheet ภายนอกเข้ามาใน Shadow DOM ได้:


class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });

    const linkElem = document.createElement('link');
    linkElem.setAttribute('rel', 'stylesheet');
    linkElem.setAttribute('href', 'my-component.css');

    this.shadow.appendChild(linkElem);
    this.shadow.innerHTML += '<p>This is a styled paragraph.</p>';
  }
}

สรุป

การเรียนรู้และเข้าใจวงจรชีวิตของ web component เป็นสิ่งจำเป็นสำหรับการสร้างคอมโพเนนต์ที่แข็งแกร่งและนำกลับมาใช้ใหม่ได้สำหรับเว็บแอปพลิเคชันสมัยใหม่ โดยการทำความเข้าใจเมธอดต่างๆ ในวงจรชีวิตและใช้แนวทางปฏิบัติที่ดีที่สุด คุณสามารถสร้างคอมโพเนนต์ที่ง่ายต่อการบำรุงรักษา มีประสิทธิภาพ และทำงานร่วมกับส่วนอื่นๆ ของแอปพลิเคชันได้อย่างราบรื่น คู่มือนี้ได้ให้ภาพรวมที่ครอบคลุมของวงจรชีวิต web component รวมถึงคำอธิบายโดยละเอียด ตัวอย่างที่นำไปใช้ได้จริง และเทคนิคขั้นสูง จงใช้พลังของ web component เพื่อสร้างเว็บแอปพลิเคชันที่เป็นโมดูล บำรุงรักษาง่าย และปรับขนาดได้

แหล่งเรียนรู้เพิ่มเติม:

MDN Web Docs: เอกสารประกอบที่ครอบคลุมเกี่ยวกับ web component และ custom element
WebComponents.org: แหล่งข้อมูลสำหรับนักพัฒนา web component ที่ขับเคลื่อนโดยชุมชน
LitElement: คลาสพื้นฐานอย่างง่ายสำหรับสร้าง web component ที่รวดเร็วและมีขนาดเล็ก