حول Shadow DOM

مرحبا!

أواصل دورة المنشورات الخاصة بي حول مجموعة معايير Web Components . هدفي هو إنشاء توقعات واقعية من هذه المجموعة من التقنيات ، وأيضًا ، معكم ، للتوصل إلى فهم أوضح للمكان الذي لا ينبغي تطبيقهم فيه ، وحيث ، على العكس من ذلك ، لم يتم ابتكار شيء أفضل حتى الآن. هذه المرة ، أقترح الخوض في Shadow DOM بمزيد من التفاصيل .

لنبدأ بالأساسيات حتى لا يفقد من لم يواجهوا موضوع المناقشة اهتمامهم بالجزء الرئيسي من المقالة. لذلك ، يعد Shadow DOM جزءًا من واجهة برمجة تطبيقات DOM الحديثة التي تسمح لك بإنشاء مناطق معزولة من المستند ، مع ترميزها الداخلي وأنماطها الخاصة. إذا فتحت ، باستخدام أدوات المطور في المستعرض ، بنية مستند تحتوي ، على سبيل المثال ، على عنصر صوت HTML قياسي ، فسترى منطقة محددة باسم # shadow-rootونوع من الترميز بالداخل. هذا هو Shadow DOM لعنصر الصوت. كما ترى ، يمكننا مواجهة مناطق "الظل" من المستندات في التطبيقات وعلى صفحات الموقع ، حتى لو لم يتم إنشاؤها بأي طريقة باستخدام مكونات الويب أو المكتبات القائمة عليها. هذه العبارة صحيحة بالنسبة لجميع العناصر الأساسية لواجهة مستخدم المتصفح القياسية مثل الأزرار والتحديدات والمدخلات وما إلى ذلك. والخبر السار هو أنه لدينا الآن القدرة على إنشاء العناصر العالمية الخاصة بنا ، على غرار المتصفح المدمج. و Shadow DOM ، في هذه الحالة ، هو الجواب على سؤال "كيف؟".

ما هي المشكلات الرئيسية التي يحلها Shadow DOM؟

1. . Shadow DOM "", , ( , "") DOM API, , , ( , ID , ).

2. . Shadow DOM "" DOM- . , Shadow DOM , , - slot. , , - .

, , - ( LitElement), , Shadow DOM - -. . Custom Elements Shadow DOM , , DOM , div. DOM , , CSS- "element.style", , , media- . JavaScript ( , ). Shadow DOM:

let myElement = document.createElement('div');
myElement.attachShadow({
  mode: 'open',
});
myElement.shadowRoot.innerHTML = /*html*/ `
<style>
:host {
  padding: 10px;
}
:host(:hover) {
  color: red;
}
</style>
<slot></slot>
`;

div , . Shadow DOM - :host, , JS. , , , .

Shadow DOM?

, -, - : UI--, -, . , , " " .

Shadow DOM.

, , -, - : .

" ".

?

, Shadow DOM , (, Custom Elements).

Shadow DOM JavaScript, , (SSR) . , .

, CSP (Content Security Policy) - DOM. . innerHTML, insertRule, . , , , - CSP- unsafe-inline. , - . Chromium, adoptedStylesheets. element.style (, , ), Shadow DOM :

let myElement = document.createElement('div');
myElement.attachShadow({
  mode: 'open',
});
myElement.shadowRoot.innerHTML = /*html*/ `
<link rel="stylesheet" href="styles.css">
<slot></slot>
`;

Shadow DOM, , , , , DOM . DOM, .

, , : IE - DOM . , , .

Shadow DOM هي تقنية قوية ومرنة. يمكن أن يسهل استخدامه إلى حد كبير حل العديد من المشكلات ويفتح المجال للإبداع في حل المشكلات غير النمطية. لكن لا تتوقع منها إجابة سحرية على كل أسئلتك وغياب كامل للصعوبات.