لدينا جميعًا مشاريع لم نكن نعمل عليها بدلاً من ذلك. أصبح الكود غير قابل للإدارة ، وتطور النطاق ، وتم تطبيق إصلاحات سريعة فوق الإصلاحات الأخرى ، وانهار الهيكل تحت ثقل كود السباغيتي. يمكن أن تكون البرمجة عملًا فوضويًا.
تستفيد المشاريع من استخدام وحدات بسيطة ومستقلة لها مسؤولية واحدة. يتم تغليف الكود المعياري ، لذلك لا داعي للقلق بشأن التنفيذ. طالما أنك تعرف ما ستخرجه الوحدة عند إعطائك مجموعة من المدخلات ، فلن تحتاج بالضرورة إلى فهم كيفية تحقيقها لهذا الهدف.
يعد تطبيق المفاهيم المعيارية على لغة برمجة واحدة أمرًا بسيطًا ، لكن تطوير الويب يتطلب مزيجًا متنوعًا من التقنيات. المتصفحات تحليل HTML ، CSS، وجافا سكريبت لتقديم للصفحة المحتوى، والأساليب، والأداء الوظيفي.
لا يختلطون دائمًا بسهولة للأسباب التالية:
يمكن تقسيم التعليمات البرمجية ذات الصلة بين ثلاثة ملفات أو أكثر ، و
يمكن أن تتداخل الأنماط العامة وكائنات JavaScript مع بعضها البعض بطرق غير متوقعة.
هذه المشاكل بالإضافة إلى تلك التي واجهتها أوقات تشغيل اللغة ، وأطر العمل ، وقواعد البيانات ، والاعتمادات الأخرى المستخدمة على الخادم.
يعد مكون الويب طريقة لإنشاء كتلة تعليمات برمجية مغلفة ذات مسؤولية واحدة يمكن إعادة استخدامها في أي صفحة.
ضع في اعتبارك <video>علامة HTML . بالنظر إلى عنوان URL ، يمكن للمشاهد استخدام عناصر التحكم مثل التشغيل والإيقاف المؤقت والتراجع والمضي قدمًا وضبط مستوى الصوت.
يتم توفير التصميم والوظائف ، على الرغم من أنه يمكنك إجراء تعديلات باستخدام سمات متنوعة واستدعاءات JavaScript API. <video>يمكن وضع أي عدد من العناصر داخل علامات أخرى ، ولن تتعارض.
ماذا لو كنت بحاجة إلى وظائف مخصصة خاصة بك؟ على سبيل المثال ، عنصر يظهر عدد الكلمات على الصفحة؟ لا توجد <wordcount>علامة HTML (حتى الآن).
الأطر مثل يردون و Vue.js تسمح للمطورين لإنشاء مكونات شبكة الإنترنت حيث يمكن تعريف المحتوى، والتصميم، وظائف في ملف واحد جافا سكريبت. هذه تحل العديد من مشاكل البرمجة المعقدة ولكن ضع في اعتبارك أن:
يجب أن تتعلم كيفية استخدام هذا الإطار وتحديث الكود الخاص بك أثناء تطوره.
نادرًا ما يكون المكون المكتوب لإطار عمل واحد متوافقًا مع آخر.
ترتفع شعبية الأطر وتتضاءل في شعبيتها. ستصبح معتمدًا على أهواء وأولويات فريق التطوير والمستخدمين.
يمكن لمكونات الويب القياسية إضافة وظائف المتصفح ، والتي يصعب تحقيقها في JavaScript وحدها (مثل Shadow DOM).
لحسن الحظ ، فإن المفاهيم الشائعة التي يتم تقديمها في المكتبات والأطر عادة ما تشق طريقها إلى معايير الويب. لقد استغرق الأمر بعض الوقت ، ولكن مكونات الويب وصلت.
بعد العديد من البدايات الخاطئة الخاصة بالبائع ، تم تقديم مفهوم مكونات الويب القياسية لأول مرة بواسطة Alex Russell في مؤتمر Fronteers في عام 2011 . وصلت مكتبة Google Polymer (وهي عبارة عن polyfill تستند إلى المقترحات الحالية) بعد ذلك بعامين ، ولكن التطبيقات المبكرة لم تظهر في Chrome و Safari حتى عام 2016.
استغرق بائعو المستعرضات وقتًا للتفاوض على التفاصيل ، ولكن تمت إضافة مكونات الويب إلى Firefox في 2018 و Edge في 2020 (عندما تحولت Microsoft إلى محرك Chromium).
من المفهوم أن القليل من المطورين أبدوا استعدادًا أو قادرين على اعتماد مكونات الويب ، لكننا وصلنا أخيرًا إلى مستوى جيد من دعم المتصفح باستخدام واجهات برمجة تطبيقات مستقرة. ليس كل شيء مثاليًا ، لكنها بديل قابل للتطبيق بشكل متزايد للمكونات القائمة على إطار العمل.
حتى إذا كنت لا ترغب في التخلص من المفضلة لديك حتى الآن ، فإن مكونات الويب متوافقة مع كل إطار عمل ، وسيتم دعم واجهات برمجة التطبيقات لسنوات قادمة.
مستودعات مكونات الويب المبنية مسبقًا متاحة للجميع لإلقاء نظرة على:
WebComponents.org
معرض المكونات
المكونات العامة
أمثلة على مكونات الويب
رهيبة – قائمة بذاتها
يمكن الوصول إليها
Kickstand UI
… لكن كتابة التعليمات البرمجية الخاصة بك أكثر متعة!
يوفر هذا البرنامج التعليمي مقدمة كاملة عن Web Components المكتوبة بدون إطار عمل JavaScript. سوف تتعلم ماهيتها وكيفية تكييفها لمشاريع الويب الخاصة بك. ستحتاج إلى بعض المعرفة بـ HTML5 و CSS و JavaScript.
مكونات الويب هي عناصر HTML مخصصة مثل <hello-world></hello-world>. يجب أن يحتوي الاسم على شرطة حتى لا يتعارض أبدًا مع العناصر المدعومة رسميًا في مواصفات HTML.
يجب تحديد فئة ES2015 للتحكم في العنصر. يمكن تسميته بأي شيء ، لكن HelloWorld ممارسة شائعة. يجب أن يوسع واجهة HTMLElement ، التي تمثل الخصائص والأساليب الافتراضية لكل عنصر HTML.
ملاحظة: يسمح لك Firefox بتوسيع عناصر HTML معينة مثل HTMLParagraphElement أو HTMLImageElement أو HTMLButtonElement. هذا غير مدعوم في المتصفحات الأخرى ولا يسمح لك بإنشاء Shadow DOM.
لفعل أي شيء مفيد ، تتطلب الفئة طريقة باسم connectCallback () يتم استدعاؤها عند إضافة العنصر إلى مستند:
class HelloWorld extends HTMLElement {
// connect component
connectedCallback() {
this.textContent = 'Hello World!';
}
}في هذا المثال ، تم تعيين نص العنصر على “Hello World”.
يجب تسجيل الفصل في CustomElementRegistry لتحديده كمعامل لعنصر معين:
customElements.define( 'hello-world', HelloWorld );يقوم المتصفح الآن بربط <hello-world>العنصر بفئة HelloWorld الخاصة بك عند تحميل JavaScript (على سبيل المثال <script type=”module” src=”./helloworld.js”></script>).
لديك الآن عنصر مخصص!
مظاهرة CodePen
يمكن تصميم هذا المكون في CSS مثل أي عنصر آخر:
hello-world {
font-weight: bold;
color: red;
}هذا المكون ليس مفيدًا حيث يتم إخراج نفس النص بغض النظر. مثل أي عنصر آخر ، يمكننا إضافة سمات HTML:
<hello-world name="Craig"></hello-world>قد يؤدي هذا إلى تجاوز النص ، لذا “Hello Craig!” معروض. لتحقيق ذلك ، يمكنك إضافة دالة constructor () إلى فئة HelloWorld ، والتي يتم تشغيلها عند إنشاء كل كائن. يجب:
استدعاء طريقة super () لتهيئة الأصل HTMLElement ، و
إجراء التهيئة الأخرى. في هذه الحالة ، سنقوم بتعريف خاصية الاسم التي تم تعيينها على الافتراضي “العالم”:
class HelloWorld extends HTMLElement {
constructor() {
super();
this.name = 'World';
}
// more code...المكون الخاص بك يهتم فقط بسمة الاسم . يجب أن تُرجع الخاصية static ObservAttributes () مجموعة من الخصائص التي يجب مراقبتها:
// component attributes
static get observedAttributes() {
return ['name'];
}و attributeChangedCallback () يتم استدعاء أسلوب عند تعريف سمة في HTML أو تغييرها باستخدام جافا سكريبت. تم تمرير اسم الخاصية والقيمة القديمة والقيمة الجديدة:
// attribute change
attributeChangedCallback(property, oldValue, newValue) {
if (oldValue === newValue) return;
this[ property ] = newValue;
}في هذا المثال ، سيتم تحديث خاصية الاسم فقط ، ولكن يمكنك إضافة خصائص إضافية حسب الضرورة.
أخيرًا ، تحتاج إلى تعديل الرسالة في طريقة connectCallback () :
// connect component
connectedCallback() {
this.textContent = `Hello ${ this.name }!`;
}مظاهرة CodePen
يقوم المستعرض تلقائيًا باستدعاء ست طرق طوال دورة حياة حالة مكون الويب. يتم توفير القائمة الكاملة هنا ، على الرغم من أنك شاهدت بالفعل الأربعة الأولى في الأمثلة أعلاه:
يتم استدعاؤه عند تهيئة المكون لأول مرة. يجب أن يستدعي super () ويمكنه تعيين أي إعدادات افتراضية أو إجراء عمليات عرض مسبق أخرى.
يُرجع مجموعة من السمات التي سيلاحظها المستعرض.
document.querySelector('hello-world').setAttribute('name', 'Everyone');
يتم استدعاؤه عند تغيير سمة تمت ملاحظتها. يتم تمرير العناصر المعرفة في HTML على الفور ، ولكن يمكن لـ JavaScript تعديلها:
document.querySelector(‘hello-world’).setAttribute(‘name’, ‘Everyone’);
قد تحتاج الطريقة إلى تشغيل إعادة تصيير عند حدوث ذلك.
يتم استدعاء هذه الوظيفة عند إلحاق مكون الويب بنموذج كائن المستند. يجب تشغيل أي عرض مطلوب.
يتم استدعاؤه عند إزالة مكون الويب من نموذج كائن المستند. قد يكون هذا مفيدًا إذا كنت بحاجة إلى التنظيف ، مثل إزالة الحالة المخزنة أو إحباط طلبات Ajax .
يتم استدعاء هذه الوظيفة عند نقل مكون الويب من مستند إلى آخر. قد تجد فائدة لهذا ، على الرغم من أنني جاهدت للتفكير في أي حالات!
تقدم Web Components بعض الوظائف الفريدة التي لن تجدها في أطر عمل JavaScript.
بينما يعمل مكون الويب الذي أنشأناه أعلاه ، فإنه ليس محصنًا ضد التدخل الخارجي ، ويمكن لـ CSS أو JavaScript تعديله. وبالمثل ، يمكن أن تتسرب الأنماط التي تحددها للمكون وتؤثر على الآخرين.
يحل Shadow DOM مشكلة التغليف هذه عن طريق إرفاق DOM منفصل بمكون الويب باستخدام:
const shadow = this.attachShadow({ mode: 'closed' });
يمكن أن يكون الوضع:
“فتح” – يمكن لـ JavaScript في الصفحة الخارجية الوصول إلى Shadow DOM (باستخدام Element.shadowRoot ) ، أو
“مغلق” – لا يمكن الوصول إلى Shadow DOM إلا من خلال مكون الويب.
يمكن معالجة Shadow DOM مثل أي عنصر DOM آخر:
connectedCallback() {
connectedCallback() {
const shadow = this.attachShadow({ mode: 'closed' });
shadow.innerHTML = `
<style>
p {
text-align: center;
font-weight: normal;
padding: 1em;
margin: 0 0 2em 0;
background-color: #eee;
border: 1px solid #666;
}
</style>
<p>Hello ${ this.name }!</p>`;
}يعرض المكون الآن نص “Hello” داخل <p>عنصر ويصممه. لا يمكن تعديله بواسطة JavaScript أو CSS خارج المكون ، على الرغم من أن بعض الأنماط مثل الخط واللون موروثة من الصفحة لأنها لم يتم تعريفها بشكل صريح.
مظاهرة CodePen
لا يمكن للأنماط المحددة لمكون الويب هذا أن تؤثر على فقرات أخرى في الصفحة أو حتى على <hello-world>المكونات الأخرى .
لاحظ أن :hostمحدد CSS يمكنه نمط <hello-world>العنصر الخارجي من داخل Web Component:
:host {
transform: rotate(180deg);
}يمكنك أيضًا تعيين الأنماط ليتم تطبيقها عندما يستخدم العنصر فئة معينة ، على سبيل المثال <hello-world class=”rotate90″>:
:host(.rotate90) {
transform: rotate(90deg);
}يمكن أن يصبح تعريف HTML داخل برنامج نصي غير عملي لمكونات الويب الأكثر تعقيدًا. يسمح لك القالب بتعريف جزء كبير من HTML في صفحتك يمكن لمكون الويب الخاص بك استخدامه. هذا له العديد من الفوائد:
يمكنك تعديل تعليمات HTML البرمجية دون الحاجة إلى إعادة كتابة السلاسل داخل JavaScript.
يمكن تخصيص المكونات دون الحاجة إلى إنشاء فئات JavaScript منفصلة لكل نوع.
من الأسهل تعريف HTML في HTML – ويمكن تعديله على الخادم أو العميل قبل عرض المكون.
يتم تعريف القوالب في <template>علامة ، ومن العملي تعيين معرف حتى تتمكن من الرجوع إليه داخل فئة المكون. هذا المثال ثلاث فقرات لعرض رسالة “مرحبًا”:
<template id="hello-world">
<style>
p {
text-align: center;
font-weight: normal;
padding: 0.5em;
margin: 1px 0;
background-color: #eee;
border: 1px solid #666;
}
</style>
<p class="hw-text"></p>
<p class="hw-text"></p>
<p class="hw-text"></p>
</template>يمكن لفئة Web Component الوصول إلى هذا القالب والحصول على محتواه واستنساخ العناصر للتأكد من أنك تقوم بإنشاء جزء DOM فريد في كل مكان يتم استخدامه فيه:
const template = document.getElementById('hello-world').content.cloneNode(true);يمكن تعديل DOM وإضافته مباشرة إلى Shadow DOM:
connectedCallback() {
const
shadow = this.attachShadow({ mode: 'closed' }),
template = document.getElementById('hello-world').content.cloneNode(true),
hwMsg = `Hello ${ this.name }`;
Array.from( template.querySelectorAll('.hw-text') )
.forEach( n => n.textContent = hwMsg );
shadow.append( template );
}مظاهرة CodePen
تسمح لك الفتحات بتخصيص قالب. افترض أنك تريد استخدام <hello-world>مكون الويب الخاص بك ولكن ضع الرسالة داخل عنوان <h1> في Shadow DOM. يمكنك كتابة هذا الرمز:
<hello-world name="Craig">
<h1 slot="msgtext">Hello Default!</h1>
</hello-world>(لاحظ سمة الفتحة .)
يمكنك اختياريًا إضافة عناصر أخرى مثل فقرة أخرى:
<hello-world name="Craig">
<h1 slot="msgtext">Hello Default!</h1>
<p>This text will become part of the component.</p>
</hello-world>يمكن الآن تنفيذ الفتحات داخل القالب الخاص بك:
<template id="hello-world">
<slot name="msgtext" class="hw-text"></slot>
<slot></slot>
</template><h1>يتم إدراج سمة فتحة عنصر تم ضبطها على “msgtext” (the ) في النقطة التي يوجد فيها نص <slot>مسمى “msgtext”. ل <p>ايوجد اسم فتحة تعيين، ولكن يتم استخدامه في المتاحة اسمه المقبل <slot>. في الواقع ، يصبح القالب:
هل تحتاج إلى حل استضافة يمنحك ميزة تنافسية؟ لقد جعلك Kinsta مغطى بسرعة لا تصدق وأحدث مستويات الأمان والتوسع التلقائي. تحقق من خططنا
<template id="hello-world">
<slot name="msgtext" class="hw-text">
<h1 slot="msgtext">Hello Default!</h1>
</slot>
<slot>
<p>This text will become part of the component.</p>
</slot>
</template>ليس الأمر بهذه البساطة في الواقع. A <slot>عنصر في DOM الظل يشير إلى العناصر المدرجة. يمكنك الوصول إليها فقط عن طريق تحديد موقع <slot>ثم باستخدام طريقة .assignedNodes () لإرجاع مصفوفة من الأبناء الداخلية. طريقة () connectCallback المحدثة :
connectedCallback() {
const
shadow = this.attachShadow({ mode: 'closed' }),
hwMsg = `Hello ${ this.name }`;
// append shadow DOM
shadow.append(
document.getElementById('hello-world').content.cloneNode(true)
);
// find all slots with a hw-text class
Array.from( shadow.querySelectorAll('slot.hw-text') )
// update first assignedNode in slot
.forEach( n => n.assignedNodes()[0].textContent = hwMsg );
}مظاهرة CodePen
بالإضافة إلى ذلك ، لا يمكنك تحديد نمط العناصر المدرجة بشكل مباشر ، على الرغم من أنه يمكنك استهداف فتحات معينة داخل مكون الويب الخاص بك:
<template id="hello-world">
<style>
slot[name="msgtext"] { color: green; }
</style>
<slot name="msgtext" class="hw-text"></slot>
<slot></slot>
</template>تعتبر فتحات القوالب غير معتادة إلى حد ما ، ولكن إحدى المزايا هي أنه سيتم عرض المحتوى الخاص بك في حالة فشل تشغيل JavaScript. يُظهر هذا الرمز عنوانًا وفقرة افتراضية يتم استبدالهما فقط عند تنفيذ فئة Web Component بنجاح:
<hello-world name="Craig">
<h1 slot="msgtext">Hello Default!</h1>
<p>This text will become part of the component.</p>
</hello-world>لذلك ، يمكنك تنفيذ شكل من أشكال التحسين التدريجي – حتى لو كانت مجرد رسالة “أنت بحاجة إلى JavaScript” !
الظل التعريفي DOM
الأمثلة أعلاه تبني Shadow DOM باستخدام JavaScript. يظل هذا هو الخيار الوحيد ، ولكن يتم تطوير Shadow DOM التجريبي لمتصفح Chrome . يسمح هذا بالعرض على جانب الخادم ويتجنب أي تغييرات في التخطيط أو ومضات من المحتوى غير المصمم.
يتم الكشف عن الكود التالي بواسطة محلل HTML ، والذي يقوم بإنشاء Shadow DOM مطابق لتلك التي قمت بإنشائها في القسم الأخير (ستحتاج إلى تحديث الرسالة حسب الضرورة):
<hello-world name="Craig">
<template shadowroot="closed">
<slot name="msgtext" class="hw-text"></slot>
<slot></slot>
</template>
<h1 slot="msgtext">Hello Default!</h1>
<p>This text will become part of the component.</p>
</hello-world>الميزة غير متوفرة في أي متصفح ، وليس هناك ما يضمن وصولها إلى Firefox أو Safari. يمكنك معرفة المزيد عن Shadow DOM التصريحي ، و polyfill بسيط ، لكن كن على دراية بأن التطبيق يمكن أن يتغير.
يمكن لمكون الويب الخاص بك إرفاق الأحداث بأي عنصر في Shadow DOM تمامًا كما تفعل في DOM الصفحة ، مثل الاستماع إلى أحداث النقر على جميع الأطفال الداخليين:
shadow.addEventListener('click', e => {
// do something
});ما لم تتوقف عن النشر ، سيظهر الحدث في صفحة DOM للصفحة ، ولكن سيتم إعادة استهداف الحدث. ومن ثم ، يبدو أنه يأتي من العنصر المخصص الخاص بك بدلاً من العناصر الموجودة بداخله.
سيعمل أي مكون ويب تقوم بإنشائه في جميع أطر عمل JavaScript . لا أحد منهم يعرف أو يهتم بعناصر HTML – <hello-world>سيتم التعامل مع المكون الخاص بك بشكل مماثل لـ a <div>ووضعه في DOM حيث سيتم تنشيط الفصل.
يوفر custom-elements-everywhere.com قائمة بإطارات العمل وملاحظات مكونات الويب. معظمها متوافق تمامًا ، على الرغم من وجود بعض التحديات في React.js. يمكن استخدامه <hello-world>في JSX:
import React from 'react';
import ReactDOM from 'react-dom';
import from './hello-world.js';
function MyPage() {
return (
<>
<hello-world name="Craig"></hello-world>
</>
);
}
ReactDOM.render(<MyPage />, document.getElementById('root'));…لكن:
يمكن لـ React تمرير أنواع البيانات الأولية فقط إلى سمات HTML (وليس المصفوفات أو الكائنات)
لا يمكن لـ React الاستماع إلى أحداث Web Component ، لذا يجب إرفاق معالجاتك يدويًا.
تحسنت مكونات الويب بشكل ملحوظ ، ولكن قد تكون إدارة بعض الجوانب صعبة.
يطرح Styling Web Components بعض التحديات ، خاصة إذا كنت تريد تجاوز الأنماط المحددة النطاق. هناك العديد من الحلول:
تجنب استخدام Shadow DOM. يمكنك إلحاق المحتوى مباشرةً بالعنصر المخصص الخاص بك ، على الرغم من أن أي JavaScript آخر قد يغيره عن طريق الخطأ أو بشكل ضار.
استخدم :hostالفئات. كما رأينا أعلاه ، يمكن لـ CSS المحدد النطاق تطبيق أنماط معينة عند تطبيق فئة على العنصر المخصص.
تحقق من خصائص CSS المخصصة (المتغيرات). تتتالي الخصائص المخصصة في مكونات الويب ، لذلك إذا كان العنصر الخاص بك يستخدم var(–my-color)، يمكنك تعيينه –my-colorفي حاوية خارجية (مثل :root) ، وسيتم استخدامه.
استفد من أجزاء الظل. يمكن للمحدِّد الجديد :: part () أن يصمم مكونًا داخليًا له سمة جزء ، أي يمكن تصميم نمط <h1 part=”heading”>داخل <hello-world>مكون باستخدام المحدِّد hello-world::part(heading).
قم بتمرير سلسلة من الأنماط. يمكنك تمريرها كسمة لتطبيقها داخل <style>كتلة.
لا شيء مثالي ، وستحتاج إلى التخطيط لكيفية تخصيص المستخدمين الآخرين لمكون الويب الخاص بك بعناية.
أي <input>، <textarea>أو <select>ليست مرتبطة الحقول في DOM الظل تلقائيا ضمن نموذج يحتوي. قد يضيف مستخدمو Web Component الأوائل حقولًا مخفية إلى DOM للصفحة أو يستخدمون واجهة FormData لتحديث القيم. لا يعتبر أي منهما عمليًا بشكل خاص ويتسبب في كسر تغليف مكون الويب.
تسمح واجهة ElementInternals الجديدة لمكون الويب بالربط في النماذج بحيث يمكن تحديد القيم المخصصة والصلاحية. تم تنفيذه في Chrome ، ولكن يتوفر polyfill للمتصفحات الأخرى.
للتوضيح ، ستقوم بإنشاء <input-age name=”your-age”></input-age>مكون أساسي . يجب أن تحتوي الفئة على شكل ثابت ، وتعيين قيمة مقترنة على ” صواب” ، واختيارياً ، يمكن استدعاء طريقة formAssociatedCallback () عندما يكون النموذج الخارجي مرتبطًا:
// <input-age> web component
class InputAge extends HTMLElement {
static formAssociated = true;
formAssociatedCallback(form) {
console.log('form associated:', form.id);
}يجب على المُنشئ الآن تشغيل طريقة attachInternals () ، والتي تسمح للمكون بالاتصال بالنموذج وكود JavaScript الآخر الذي يريد فحص القيمة أو التحقق من الصحة:
constructor() {
super();
this.internals = this.attachInternals();
this.setValue('');
}
// set form value
setValue(v) {
this.value = v;
this.internals.setFormValue(v);
}تحدد طريقة setFormValue () الخاصة بـ ElementInternal قيمة العنصر للنموذج الأصلي الذي تمت تهيئته بسلسلة فارغة هنا (يمكن أيضًا تمرير كائن FormData بأزواج اسم / قيمة متعددة). تشمل الخصائص والطرق الأخرى:
الشكل : نموذج الأصل
labels : مجموعة من العناصر التي تسمي المكون
خيارات واجهة برمجة التطبيقات للتحقق من صحة القيد مثل willValidate و checkValidity و validationMessage
و connectedCallback () الأسلوب بإنشاء الظل DOM كما كان من قبل، ولكن يجب أيضا مراقبة المجال لإجراء تغييرات، لذلك setFormValue () يمكن تشغيلها:
connectedCallback() {
const shadow = this.attachShadow({ mode: 'closed' });
shadow.innerHTML = `
<style>input { width: 4em; }</style>
<input type="number" placeholder="age" min="18" max="120" />`;
// monitor input values
shadow.querySelector('input').addEventListener('input', e => {
this.setValue(e.target.value);
});
}يمكنك الآن إنشاء نموذج HTML باستخدام مكون الويب هذا والذي يعمل بطريقة مشابهة لحقول النموذج الأخرى:
<form id="myform">
<input type="text" name="your-name" placeholder="name" />
<input-age name="your-age"></input-age>
<button>submit</button>
</form>إنه يعمل ، لكنه يبدو معقدًا بعض الشيء.
تحقق من ذلك في العرض التوضيحي CodePen
لقد كافحت مكونات الويب للحصول على اتفاق واعتماد في وقت نمت فيه أطر عمل JavaScript في المكانة والقدرة. إذا كنت قادمًا من React أو Vue أو Angular ، يمكن أن تبدو مكونات الويب معقدة وعرقلة ، خاصة عندما تفتقد ميزات مثل ربط البيانات وإدارة الحالة.
هناك مكامن الخلل التي يجب حلها ، لكن مستقبل Web Components مشرق. إنها حيادية الإطار ، وخفيفة الوزن ، وسريعة ، ويمكنها تنفيذ وظائف قد تكون مستحيلة في JavaScript وحدها.
قبل عقد من الزمان ، كان عدد قليل منهم قد تعامل مع موقع بدون jQuery ، لكن بائعي المستعرضات أخذوا الأجزاء الممتازة وأضافوا بدائل أصلية (مثل مُحدد الاستعلام). سيحدث الشيء نفسه بالنسبة لأطر عمل JavaScript ، ومكونات الويب هي الخطوة الأولية الأولى.
