Ի՞նչ է Shadow DOM-ը։

Shadow DOM - դա վեբ ստանդարտ է, որը թույլ է տալիս ինկապսուլացնել DOM և CSS-ը կոմպոնենտի ներսում: Այն ստեղծում է առանձին, մեկուսացված DOM ծառ, որը կոչվում է "ծածկած ծառ" (shadow tree), որը ամրակցված է հիմնական փաստաթղթի տարրին, որը կոչվում է "ծածկած հիմք" (shadow root).

Shadow DOM-ի առավելությունները:

• CSS-ի մեկուսացում: Shadow DOM-ի ներսում սահմանված ոճերը չեն "լողում" դուրս, ազդելով հիմնական փաստաթղթին, և հակառակը, հիմնական փաստաթղթի ոճերը սովորաբար չեն ազդում Shadow DOM-ի վրա.
• DOM-ի մեկուսացում: Shadow DOM-ի կառուցվածքը թաքնված է հիմնական փաստաթղթից և հասանելի չէ ստանդարտ ընտրիչ մեթոդներով (օրինակ, querySelector).
• JavaScript-ի մեկուսացում: Скрипտները, որոնք կատարվում են հիմնական փաստաթղթում, հեշտությամբ չեն կարող մուտք գործել Shadow DOM-ի տարրեր.
• Կրկնակի օգտագործում: Shadow DOM-ով ստեղծված կոմպոնենտները հեշտությամբ կարող են օգտագործվել այլ մասերում կամ նույնիսկ այլ վեբ կայքերում.

Shadow DOM-ի ստեղծում:

// Ստանում ենք տարր, որի վրա ուզում ենք ամրացնել Shadow DOM
const hostElement = document.getElementById('my-component');

// Ստեղծում ենք Shadow Root
// 'open'-ը դարձնում է Shadow DOM-ը հասանելի արտաքինից hostElement.shadowRoot-ի միջոցով
// 'closed'-ը թաքցնում է Shadow DOM-ը
const shadowRoot = hostElement.attachShadow({ mode: 'open' });

// Ավելացնում ենք տարրեր Shadow DOM-ի ներսում
shadowRoot.innerHTML = `
  <style>
    /* Այս կոմպոնենտի հատուկ ոճեր */
    h2 {
      color: blue;
    }
  </style>
  <h2>Կոմպոնենտի ներսի վերնագիր</h2>
  <p>Կոմպոնենտի ներսի պարբերականը:</p>
`;

Հատկություններ:

• Սլոտներ (Slots): թույլ են տալիս տեղադրել արտաքին պարունակությունը որոշ տեղերում Shadow DOM-ի ներսում:
• Shadow Parts: թույլ են տալիս արտաքինից ոճավորել որոշ տարրեր Shadow DOM-ի ներսում:

Shadow DOM-ը կարևոր բաղադրիչ է վեբ կոմպոնենտների (Web Components) ստեղծման համար, ապահովելով ուժեղ ինկապսուլացում, որը անհրաժեշտ է վերօգտագործվող և ինքնաբավ UI տարրեր ստեղծելու համար։