ความแตกต่างระหว่างองค์ประกอบของเว็บและองค์ประกอบที่กำหนดเองคืออะไร?

"ส่วนประกอบของเว็บ" และ "องค์ประกอบที่กำหนดเอง" มักจะสับสนและการค้นหาเว็บสำหรับชื่อของคำถามนี้ยังไม่ได้สร้างความชัดเจนมากนัก มาแก้ไขกันเถอะ

องค์ประกอบที่กำหนดเองเป็นส่วนข้อกำหนดของมาตรฐานWeb Componentsพร้อมกับ Shadow DOM, เทมเพลตและการนำเข้า HTML

จากสเป็ค:

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

ประวัติศาสตร์

สเปคเป็นตอนที่v1 รุ่นก่อนหน้านี้ v0 ได้รับการสนับสนุนตั้งแต่ Chrome 33และมี API ที่แตกต่างกันโดยใช้document.registerElement- ซึ่งเป็นตอนนี้เลิกใช้

การใช้

องค์ประกอบแบบกำหนดเองอาจเป็นแบบอิสระ (การสร้างองค์ประกอบใหม่ตั้งแต่เริ่มต้น (นั่นคือการขยายHTMLElement ) หรือสามารถกำหนดองค์ประกอบ HTML ที่มีอยู่ (เช่น HTMLButtonElement)

// autonomous element
customElements.define("flag-icon", FlagIcon);
// customized <button> element
customElements.define("plastic-button", PlasticButton, { extends: "button" });

พารามิเตอร์ที่สองในการcustomElements.define()เรียกเป็นชื่อของคลาสที่ใช้พฤติกรรมขององค์ประกอบ ดูตัวอย่างในสเปคสำหรับองค์ประกอบในกำกับของรัฐและการปรับแต่งในตัวองค์ประกอบ

class PlasticButton extends HTMLButtonElement {
  constructor() {
    super();

    this.addEventListener("click", () => {
      // Draw some fancy animation effects!
    });
  }
}

องค์ประกอบที่กำหนดเองได้รับการสนับสนุน natively ในเบราว์เซอร์ที่ทันสมัยบางและสามารถpolyfilledเบราว์เซอร์รุ่นเก่าจะกลับไปที่ Safari 7+ และ IE11 เห็นแล้วยังpolyfill v1

เทมเพลตและ Shadow DOM

โดยการใช้เทมเพลตและเงา DOM ในองค์ประกอบที่กำหนดเองคุณสามารถทำให้องค์ประกอบง่ายต่อการจัดการและนำกลับมาใช้ใหม่ได้

เทมเพลตอนุญาตให้ใช้ HTML เพื่อประกาศโครงสร้างขององค์ประกอบที่กำหนดเอง:

<!-- Template Definition -->
<template id="fancy-element-template">
  <style>
    ...
  </style>
  <div id="container">
    <p>Some fancy markup goes here...</p>
  </div>
</template>

<!-- Custom Element usage -->
<fancy-element></fancy-element>

Shadow DOMอนุญาตให้ใช้สไตล์รหัสและคลาสของเนื้อหาในขอบเขตของตัวเอง สิ่งนี้ป้องกันไม่ให้ CSS มีเลือดออกหรือเข้าถึงภายในขององค์ประกอบที่กำหนดเองจากด้านนอก

customElements.define('fancy-element', class extends HTMLElement {
  constructor() {
    super();
    let shadowRoot = this.attachShadow({mode: 'open'});
    const t = document.querySelector('#fancy-element-template');
    const instance = t.content.cloneNode(true);
    shadowRoot.appendChild(instance);
  }
  ...
});

เรียนรู้เพิ่มเติม

บทความGoogle Developers :

• องค์ประกอบที่กำหนดเอง v1: องค์ประกอบเว็บที่นำมาใช้ซ้ำได้
• Shadow DOM: คอมโพเนนต์ของเว็บที่มีในตัว