Een shadow root is het rootknooppunt van een shadow DOM-boom, aangemaakt via de attachShadow()-methode met mode 'open' of 'closed'. In open mode is de shadow root toegankelijk via JavaScript — in closed mode niet. De shadow root encapsuleert markup en styles zodat ze niet lekken naar of vanuit de rest van het document.
Custom Elements
AAA
Frontend
Custom Elements
Met de web components-API definieer je eigen HTML-tags, zoals <user-card>. Je gebruikt speciale functies (connectedCallback, attributeChangedCallback) en maakt je eigen element customElements.define(). Combineer dit met Shadow DOM voor afschermen en hergebruik zonder framework.
AAA
Frontend
Shadow DOM
AAA
Concepten
Shadow DOM
Shadow DOM is een browserstandaard voor het afschermen van markup, styles en gedrag binnen een component. Dit voorkomt style-lekkage en naamconflicten en levert voorspelbaar gedrag op. Het wordt gebruikt met web components en biedt shadow roots, slots en scoped CSS.
AAA
Concepten
Een uitgebreide collectie begrippen voor elk niveau
Van HTML & CSS tot databases en security
Geschikt voor beginners en gevorderden
Ideaal als lesmateriaal of teambuilding tool
Fysiek aan de slag, zonder scherm