Web Components عبارة عن مجموعة من واجهات برمجة التطبيقات الأصلية للمتصفح لبناء عناصر HTML مخصصة قابلة لإعادة الاستخدام ومغلقة بذاتها — بدون اعتماد على أي إطار عمل وقائمة على المعايير الدولية. ثلاث تقنيات تعمل معاً:
Web Components عبارة عن مجموعة من واجهات برمجة التطبيقات الأصلية للمتصفح لبناء عناصر HTML مخصصة قابلة لإعادة الاستخدام ومغلقة بذاتها — بدون اعتماد على أي إطار عمل وقائمة على المعايير الدولية. ثلاث تقنيات تعمل معاً:
<template>, <slot>) — markup خامل وقابل لإعادة الاستخدام.class UserCard extends HTMLElement {
connectedCallback() { // lifecycle: runs when added to the page
const shadow = this.attachShadow({ mode: "open" }); // create shadow DOM
shadow.innerHTML = `
<style> h2 { color: blue; } </style>
<h2>${this.getAttribute("name")}</h2>
<slot></slot>
`;
}
}
customElements.define("user-card", UserCard); // name MUST contain a hyphen
<user-card name="Ann">Extra content goes in the slot</user-card>
الأنماط داخل shadow root يتم تحديد نطاقها — CSS الصفحة لا يمكنها الوصول إلى الداخل، والـ CSS الخاص بالمكون لا يمكنه التسرب إلى الخارج. هذا يحل مشكلة CSS العام بشكل أصلي:
/* page CSS */ h2 { color: red; } /* does NOT affect the <h2> inside user-card */
connectedCallback() // added to DOM
disconnectedCallback() // removed from DOM (cleanup)
attributeChangedCallback(name, old, val) // an observed attribute changed
static get observedAttributes() { return ["name"]; }
Web Components تسمح لك بناء عناصر واجهة قابلة لإعادة الاستخدام تعمل في أي إطار عمل (أو بدونه) مع تغليف حقيقي للأنماط والـ DOM — مثالية لأنظمة التصميم والـ micro-frontends المشتركة بين فرق تستخدم مكدسات تقنية مختلفة.
هذا كيف تشحن مكتبات مثل Shoelace مكونات بدون اعتماد على إطار عمل.
المقايضات (واجهة برمجية مفصولة، تعقيد SSR/الأنماط) تعني أن مطوري التطبيقات غالباً ما يفضلون React/Vue، لكن البدائي الأساسي قوي وقائم على المعايير.