الإنجليزية
صمم موقعك الأن!
مكونات الويب (Web Components) مجموعة معايير مدمجة في المتصفحات (العناصر المخصصة وShadow DOM والقوالب) تسمح لك ببناء عناصر واجهة قابلة لإعادة الاستخدام دون إطار عمل. تعمل في كل المتصفحات الحديثة ويمكن استخدامها داخل React أو Vue أو HTML عادي. نشرح فوائدها ومثالاً من ثلاث خطوات: تعريف العنصر، واستخدامه، وتحسينه.
تعد مكونات الويب أداة قوية لمطوري الويب، مما يسمح بإنشاء عناصر مخصصة قابلة لإعادة الاستخدام ومحكمة الإغلاق. في هذه المقالة، سنستعرض كيفية استخدام مكونات الويب في موقعك الإلكتروني، مما يمنحك المعرفة لتحسين مشاريع تصميم الويب الخاصة بك بشفرة برمجية نموذجية وفعالة.
مكونات الويب هي مجموعة من واجهات برمجة تطبيقات الويب التي تتيح لك إنشاء عناصر HTML مخصصة قابلة لإعادة الاستخدام ومحكمة الإغلاق. تتكون من ثلاث تقنيات رئيسية:
إذا كنت تخطط لموقع جديد أو تريد تطوير موقعك الحالي، يمكننا مراجعة احتياجك واقتراح الحل الأنسب. احجز استشارة مجانية عبر واتساب
لإنشاء عنصر مخصص، تحتاج إلى تعريف فئة تمتد من HTMLElement واستخدام طريقة customElements.define.
javascript
Copy code
class MyComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.container {
background-color: #f9f9f9;
padding: 20px;
border-radius: 5px;
}
</style>
<div class="container">
<p>Hello, I am a web component!</p>
</div>
`;
}
}
customElements.define('my-component', MyComponent);
في هذا المثال، نقوم بتعريف عنصر مخصص يسمى my-component مع أنماط وHTML محكمة الإغلاق.
بمجرد تعريفه، يمكنك استخدام العنصر المخصص تمامًا مثل أي علامة HTML أخرى.
html
Copy code
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>كيفية استخدام مكونات الويب في موقعك الإلكتروني</title>
</head>
<body>
<my-component></my-component>
<script src="path/to/your/component.js"></script>
</body>
</html>
قم بتضمين العنصر المخصص في HTML الخاص بك واربط ملف JavaScript الذي تم تعريفه فيه.
يمكن تمديد مكونات الويب بإضافة ميزات إضافية مثل السمات والأحداث. على سبيل المثال، يمكنك إضافة سمة لتخصيص محتوى المكون.
javascript
Copy code
class MyComponent extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
.container {
background-color: #f9f9f9;
padding: 20px;
border-radius: 5px;
}
</style>
<div class="container">
<p></p>
</div>
`;
}
connectedCallback() {
this.shadowRoot.querySelector('p').textContent = this.getAttribute('message') || 'Hello, I am a web component!';
}
}
customElements.define('my-component', MyComponent);
الآن، يمكنك استخدام سمة message لتخصيص محتوى المكون.
html Copy code <my-component message="رسالة مخصصة لمكوني"></my-component>
تعلم كيفية استخدام مكونات الويب في موقعك الإلكتروني يمكن أن يحسن بشكل كبير من عملية التطوير الخاصة بك عن طريق جعل الشفرة أكثر نموذجية وقابلة لإعادة الاستخدام. باتباع الخطوات الموضحة أعلاه، يمكنك البدء في دمج مكونات الويب في مشاريعك، مما يؤدي إلى شفرة أنظف وأسهل في الصيانة.
نعم، العناصر المخصصة وShadow DOM والقوالب مدعومة في كل المتصفحات الحديثة.
يعزل تنسيقات المكون وبنيته عن باقي الصفحة، فلا تتعارض أنماط CSS بين المكون والموقع.
ليس دائماً؛ هي ممتازة للعناصر المشتركة بين مشاريع مختلفة، أما التطبيقات الكبيرة فغالباً تستفيد من إطار عمل.
في سيمبا ويب نصمم ونبرمج مواقع الشركات والمتاجر في الأردن والخليج والعالم العربي، سريعة على الجوال ومهيأة لمحركات البحث من اليوم الأول.
آخر تحديث: نوفمبر 2026
