ทําให้องค์ประกอบที่กําหนดเองทํางานร่วมกับรีจิสทรีที่กำหนดขอบเขต

Jayson Chen

Patrick Brosset

เผยแพร่: 9 มีนาคม 2026

Custom Elements ช่วยให้นักพัฒนาเว็บแอปสร้าง แชร์ และนำคอมโพเนนต์ UI มาใช้ซ้ำได้ พร้อมลักษณะการทำงานที่ไม่ซ้ำกัน ซึ่งช่วยให้การพัฒนาแอปง่ายขึ้น แต่เมื่อแอปของคุณนำชุดองค์ประกอบที่กำหนดเองต่างๆ มา รวมกัน ก็อาจเกิดความไม่เป็นระเบียบและชื่อ ซ้ำกันได้ รีจิสทรีขององค์ประกอบที่กำหนดเองที่กำหนดขอบเขตจะช่วยแก้ปัญหานี้ได้

ทีม Microsoft Edge ได้พัฒนาฟีเจอร์นี้ และเรายินดีที่จะประกาศว่าตอนนี้รีจิสทรีขององค์ประกอบที่กำหนดเองที่กำหนดขอบเขตพร้อมใช้งานโดยค่าเริ่มต้นจาก Edge และ Chrome 146 รวมถึงเบราว์เซอร์อื่นๆ ที่ใช้ Chromium ตอนนี้คุณสามารถ แคปซูลองค์ประกอบที่กำหนดเอง ซึ่งช่วยแก้ปัญหาที่นักพัฒนาซอฟต์แวร์ คอมโพเนนต์และไลบรารี Micro Frontend ประสบมานาน

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

รีจิสทรีขององค์ประกอบที่กำหนดเองที่มีขอบเขตคืออะไร

ปัจจุบันคำจำกัดความขององค์ประกอบที่กำหนดเองทุกรายการในหน้าเว็บจะอยู่ในรีจิสทรีที่แชร์รายการเดียวที่ window.customElements ซึ่งหมายความว่าหากไลบรารี 2 รายการที่แตกต่างกัน พยายามกำหนด Custom Element ที่มีชื่อแท็กเดียวกัน เช่น <my-button> ระบบจะแสดงข้อผิดพลาดและหน้าเว็บจะใช้งานไม่ได้ นี่เป็นปัญหาที่สำคัญ ในโลกแห่งความเป็นจริง แอปพลิเคชันขนาดใหญ่ที่ประกอบอินเทอร์เฟซผู้ใช้จากหลายทีม ระบบการออกแบบ หรือ Micro-Frontend อาจพบปัญหาชื่อซ้ำได้ง่าย รีจิสทรีขององค์ประกอบที่กำหนดเองที่กำหนดขอบเขตจะช่วยแก้ปัญหานี้ได้ด้วยการให้คุณสร้างรีจิสทรีอิสระ รีจิสทรีแต่ละรายการจะดูแลชุดคำจำกัดความขององค์ประกอบที่กำหนดเองของตนเอง โดยแยกออกจากรีจิสทรีส่วนกลางและแยกออกจากกันโดยสิ้นเชิง

สร้างรีจิสทรีใหม่

แทนที่จะกำหนดองค์ประกอบที่กำหนดเองทุกรายการในรีจิสทรีส่วนกลาง window.customElements

1. สร้างรีจิสทรีใหม่โดยเรียกใช้ new CustomElementRegistry()
2. กำหนดขอบเขตที่เฉพาะเจาะจงให้กับรีจิสทรีใหม่ (ดูการกำหนดขอบเขตของรีจิสทรี)
3. กำหนดองค์ประกอบที่จะอยู่ในรีจิสทรีใหม่

จากนั้นเมื่อมีการใช้องค์ประกอบที่กำหนดเอง เบราว์เซอร์จะค้นหาคำจำกัดความขององค์ประกอบจากรีจิสทรีที่เชื่อมโยง ซึ่งไม่จำเป็นต้องเป็นรีจิสทรีส่วนกลาง ซึ่งหมายความว่าส่วนต่างๆ ของหน้าเว็บสามารถใช้ชุดคำจำกัดความของ Custom Element ที่แตกต่างกันโดยสิ้นเชิงได้

กำหนดขอบเขตรีจิสทรี

รีจิสทรีของ Custom Element สามารถกำหนดขอบเขตเป็นเอกสาร Shadow Root หรือ องค์ประกอบแต่ละรายการได้

ขอบเขตไปยัง Shadow Root

หากต้องการกำหนดขอบเขตรีจิสทรีใหม่ไปยัง Shadow Root ให้ใช้ตัวเลือก customElementRegistry เมื่อเรียกใช้เมธอด attachShadow() ตอนนี้องค์ประกอบที่กำหนดเองทั้งหมดที่อยู่ภายใน Shadow Root นั้นจะใช้คำจำกัดความที่อยู่ในรีจิสทรีที่กำหนดขอบเขตที่เกี่ยวข้อง

// Create your custom registry.
const registry = new CustomElementRegistry();
// Define a custom element in the new registry.
registry.define('my-card', class extends HTMLElement {
  connectedCallback() {
    this.textContent = 'Hello from scoped registry!';
  }
});

// Create shadow root, providing it with your new custom element registry.
const host = document.querySelector('#host');
const shadow = host.attachShadow({
  mode: 'open',
  customElementRegistry: registry,
});

shadow.innerHTML = '<my-card></my-card>';

Declarative Shadow DOM

ใช้แอตทริบิวต์ shadowrootcustomelementregistry ในองค์ประกอบ <template> เพื่อบอกเบราว์เซอร์ว่า Shadow Root ที่ได้ ใช้รีจิสทรีที่กำหนดขอบเขตแทนรีจิสทรีส่วนกลาง

<my-host>
  <template shadowrootmode="open" shadowrootcustomelementregistry>
    <my-widget></my-widget>
  </template>
</my-host>

  const registry = new CustomElementRegistry();
  registry.define('my-widget', class extends HTMLElement {
    connectedCallback() { this.textContent = 'Scoped!'; }
  });

  const shadow = document.querySelector('my-host').shadowRoot;
  registry.initialize(shadow);

ดังที่แสดงในตัวอย่าง แอตทริบิวต์จะสงวนพื้นที่สำหรับรีจิสทรีขององค์ประกอบที่กำหนดเอง และผู้ใช้ต้องกำหนดและเริ่มต้นรีจิสทรีเพื่อกำหนดขอบเขต Shadow Root ไปยังเอกสารที่ไม่ได้เชื่อมต่อ

นอกจากนี้ คุณยังกำหนดขอบเขตรีจิสทรีไปยังเอกสารได้ด้วย เช่น เอกสารที่สร้างโดย document.implementation.createHTMLDocument() ซึ่งจะช่วยให้คุณโคลน <template>องค์ประกอบ และทำการจัดการเอกสารนอกหน้าจอ โดยแต่ละองค์ประกอบจะมี ชุดคำจำกัดความของคอมโพเนนต์ที่แยกกัน หากต้องการดำเนินการนี้ ให้ใช้วิธี CustomElementRegistry.initialize()

// Create a new registry.
const registry = new CustomElementRegistry();
registry.define('app-widget', AppWidget);

// Create a document, and use registry.initialize() to scope the registry to the document.
const doc = document.implementation.createHTMLDocument('');
registry.initialize(doc);

doc.body.innerHTML = '<app-widget></app-widget>';

กำหนดขอบเขตไปยังองค์ประกอบแต่ละรายการ

นอกจากนี้ คุณยังเชื่อมโยงรีจิสทรีกับองค์ประกอบและซับทรีได้โดยตรงโดย ส่งตัวเลือก customElementRegistry ไปยัง document.createElement() องค์ประกอบ และองค์ประกอบย่อยจะได้รับการแก้ไขกับรีจิสทรีนั้น ไม่ว่าภายหลังจะมีการแทรกองค์ประกอบเหล่านั้นลงในส่วนใดของ DOM ก็ตาม

// Create a registry and define a custom element in it.
const registry = new CustomElementRegistry();
registry.define('fancy-label', FancyLabel);

// Create a new DOM element and scope the new registry to it.
const el = document.createElement('fancy-input', {
  customElementRegistry: registry,
});

// Use a custom element in the new DOM element.
el.innerHTML = '<fancy-label>Name</fancy-label>';

ดูข้อมูลเพิ่มเติม

ดูข้อมูลเพิ่มเติมได้ที่การสาธิต ของ Edge และซอร์ส โค้ด รวมถึงอ่านบทความอ้างอิง CustomElementRegistry ของ MDN

ตอนนี้เราได้เปิดใช้รีจิสทรีขององค์ประกอบที่กำหนดเองที่มีขอบเขตโดยค่าเริ่มต้นในทั้ง Microsoft Edge และ Chrome รวมถึงในเบราว์เซอร์อื่นๆ ที่ใช้ Chromium ด้วย การทำงานร่วมกันผ่านโปรเจ็กต์ Chromium

คุณไม่จำเป็นต้องเปิดใช้การตั้งค่าใดๆ หรือลงชื่อสมัครใช้การทดลองใช้ Origin คุณเริ่มใช้ฟีเจอร์นี้ได้แล้ววันนี้ในเบราว์เซอร์ที่พัฒนาบน Chromium

หากต้องการให้มีการใช้ฟีเจอร์นี้ในเบราว์เซอร์อื่นๆ โปรดกดรีแอ็กชันเป็นนิ้วโป้งขึ้นในปัญหาเกี่ยวกับรีจิสทรีขององค์ประกอบที่กำหนดเองที่กำหนดขอบเขต และแสดงความคิดเห็นพร้อมกรณีการใช้งานและวิธีแก้ปัญหา

หากพบข้อบกพร่องในการติดตั้งใช้งานฟีเจอร์ในเบราว์เซอร์ที่ใช้ Chromium โปรดเปิดปัญหาให้เราตรวจสอบที่ crbug.com/new

เราหวังว่ารีจิสทรีขององค์ประกอบที่กำหนดเองที่กำหนดขอบเขตจะช่วยให้การใช้คอมโพเนนต์เว็บง่ายขึ้น