Ի՞նչ է Shadow DOM-ը։

Shadow DOM — դա վեբ ստանդարտ է, որը թույլ է տալիս ամփոփել DOM ծառը և ոճերը կոմպոնենտի ներսում, դրանք առանձնացնել մնացած փաստաթղթից:

Հիմնական հասկացությունները՝

• Shadow tree: սեփական DOM ծառ, կապված տարրին:
• Shadow boundary: սահման, որը բաժանում է Shadow DOM-ը հիմնական փաստաթղթից:
• Shadow host: տարր, որի վրա է ամփոփված Shadow DOM-ը:
• Shadow root: Shadow ծառի արմատային հանգույց:

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

• Ոճերի առանձնացում: Shadow DOM-ի ներսում սահմանված ոճերը չեն ազդում նրա դուրս գտնվող տարրերի վրա, և հակառակը:
• DOM-ի առանձնացում: Shadow DOM-ի ներսում գտնվող DOM կառուցվածքը չի երևում և չի հասանելի հիմնական փաստաթղթից, ինչը կանխում է id և դասերի բախումները:
• Կապսուլացում: ստեղծում է մոդուլային, բազմակի օգտագործման կոմպոնենտներ:

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

const hostElement = document.getElementById('my-component');
const shadowRoot = hostElement.attachShadow({ mode: 'open' }); // ռեժիմ՝ 'open' - հասանելի է JavaScript-ից; 'closed' - ոչ

shadowRoot.innerHTML = `
  <style>
    /* Այս Shadow DOM-ի համար ոճեր */
    p {
      color: blue;
    }
  </style>
  <p>Սա Shadow DOM-ի բովանդակությունն է</p>
`;