Ի՞նչ է Shadow DOM-ը։

Shadow DOM — դա վեբ ստանդարտ է, որը թույլ է տալիս ինкапսուլացնել HTML, CSS և JavaScript-ը առանձին, იზոլացված բլոկների մեջ հիմնական փաստաթղթից:

Հիմնական կոնցեպտներ՝

• Shadow Host: DOM էլեմենտ, որի վրա է միացված Shadow DOM:
• Shadow Tree: Իզոլացված DOM ծառ:
• Shadow Boundary: Սահմանի սահմանը Shadow DOM և հիմնական փաստաթղթի միջև:
• Shadow Root: Shadow Tree-ի հիմնական հանգույցը, որը ստեղծվում է element.attachShadow({ mode: 'open' | 'closed' }) միջոցով:
  • open: Shadow Root հասանելի է արտաքինից element.shadowRoot-ով:
  • closed: Shadow Root հասանելի չէ արտաքինից:

Առավելություններ՝

• Ստիլների ինկապսուլյացիա: Shadow DOM-ում սահմանված ոճերը չեն արտահոսում և չեն ազդում հիմնական փաստաթղթի վրա:
• DOM-ի ինկապսուլյացիա: Shadow DOM-ի ներսի տարրերը չեն երևում հիմնական DOM-ում, ինչը կանխում է պատահական հատման սելեկտորների և մանիպուլյացիաների:
• Վարվելակերպի ինկապսուլյացիա: Լոգիկան և իրադարձությունների մշակողները կարող են լինել մեկուսացված Shadow DOM-ում:

Օրինակ՝ Shadow DOM ստեղծելու համար՝

// Նոր DIV տարր ստեղծում
const hostElement = document.createElement('div');
// Shadow DOM միացում տարրին
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Մատչելիություն ավելացնել Shadow DOM-ում
shadowRoot.innerHTML = `
  <style>
    /* Միայն այս Shadow DOM-ի ներսում կիրառելի ոճ */
    p {
      color: blue;
    }
  </style>
  <p>Սա Shadow DOM-ի ներսում տեքստ է</p>
`;

// Հետո՝ main փաստաթղթին ավելացնել
document.body.appendChild(hostElement);

Օգտագործում՝

• Վեբ կոմպոնենտների վերաօգտագործելի ստեղծում:
• Բաժանարար ոճերի համար՝ երրորդ կողմի գրադարանների:
• Արտաքին միջամտություններից պաշտպանելու համար՝ կոմպոնենտի ներքին մանրամասները:

Ոճերի աշխատանքի առանձնահատկություններ՝

• Բացասական ոճերը սովորաբար չեն ազդում Shadow DOM-ի վրա:
• :host псевдо-դասը կարող է օգտագործվել Shadow Host-ի ինքստինքյան ոճավորման համար:
• :host-context() կարող է օգտագործվել կոնտեքստային ոճավորման համար:
• ::slotted() псевдо-մեկուսիչը՝ սլոտների ( <slot> ) մեջ տեղադրված տարրերի ոճավորման համար:

<my-component>
  <!-- Այս տարրը կուղարկվի Shadow DOM-ի սլոտին -->
  <span>Սլոտի բովանդակություն</span>
</my-component>

// Shadow DOM-ի ներսում my-component կոմպոնենտում
const shadowRoot = this.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
  <style>
    /* Սլոտի "my-slot" անվամբ տարրերի ոճը */
    ::slotted(span) {
      font-weight: bold;
    }
  </style>
  <div>Կոմպոնենտի հիմնական բովանդակությունը</div>
  <slot></slot> <!-- Այստեղ կցուցադրվի սլոտի բովանդակությունը -->
`;

Shadow DOM-ը մաս է Web Components-ի ստանդարտի։