Meta tags:
description= Das Shadow DOM ermöglicht das Anhängen eines gekapselten DOM-Baums an ein Element, sodass Markup, Styles und Skripte isoliert bleiben. Erfahre mehr über…;
Headings (most frequently used words):
shadow, dom, root, javascript, erstellen, einer, im, mit, für, was, ist, styling, slots, light, inhalt, interaktion, dem, praktische, beispiele, wann, sollte, verwendet, werden, fazit, übungen, offene, geschlossene, spezielle, selektoren, das, zugriff, auf, elemente, event, retargeting, wiederverwendbaren, web, komponente, integration, frameworks, react, beispiel,
Text of the page (most frequently used words):
#shadow (136), dom (91), und (83), die (66), das (54), div (49), root (45), host (38), der (28), ist (26), script (26), const (25), style (25), mit (24), javascript (23), open (22), shadowroot (21), wird (20), api (20), #element (19), color (18), document (18), content (18), closed (17), styles (17), class (17), eine (16), mode (16), des (16), ein (16), lernen (15), komponente (15), attachshadow (15), nicht (15), slot (15), css (14), von (14), elemente (14), body (14), card (14), custom (13), auf (13), title (13), box (13), web (12), this (12), innerhalb (12), border (12), den (12), für (11), beispiel (11), react (11), kopieren (11), getelementbyid (11), event (11), styled (11), dem (10), selbst (10), padding (10), innerhtml (10), über (9), probier (9), verwendet (9), erstellen (9), einer (9), was (9), part (9), gibt (9), the (9), solid (9), button (9), html (8), light (8), elements (8), nur (8), wenn (8), einem (8), eines (8), 10px (8), target (8), methoden (8), werden (7), slots (7), oder (7), kapselung (7), diesem (7), 5px (7), hauptdokument (7), span (7), label (7), tools (6), inhalt (6), null (6), erstellt (6), komponenten (6), ermöglicht (6), customcard (6), 1px (6), sich (6), sie (6), events (6), click (6), baum (6), baums (6), queryselector (6), btn (6), w3docs (5), übungen (5), styling (5), äußeren (5), dokument (5), stylen (5), zurück (5), durch (5), verwende (5), interna (5), dass (5), sind (5), and (5), wie (5), aus (5), zugriff (5), name (5), closedshadowhost (5), string (5), formatter (5), alle (4), json (4), code (4), generator (4), beispiele (4), interaktion (4), page (4), template (4), slotted (4), erlaubt (4), objekt (4), methode (4), bietet (4), diese (4), kapselt (4), globales (4), cardref (4), kann (4), ohne (4), konflikte (4), components (4), anhängen (4), aber (4), outer (4), addeventlistener (4), nach (4), können (4), manipulieren (4), inhalte (4), projiziert (4), beeinflussen (4), background (4), black (4), head (4), browser (4), fetch (4), async (4), einführung (4), encoder (3), editor (3), quizze (3), php (3), prüfen (3), explizit (3), freigibt (3), übung (3), wurde (3), widgets (3), theming (3), properties (3), verbergen (3), erfordert (3), grenze (3), app (3), sicher (3), struktur (3), hello (3), font (3), 2px (3), radius (3), text (3), babel (3), https (3), unpkg (3), com (3), src (3), container (3), verwenden (3), wodurch (3), wiederverwendbaren (3), schaltfläche (3), composedpath (3), console (3), listener (3), ereignisse (3), privat (3), wir (3), vom (3), attribut (3), theme (3), ihre (3), einen (3), klasse (3), zwei (3), definierten (3), erstellung (3), debugging (3), referenz (3), catch (3), try (3), roots (3), change (3), geschlossene (3), folgenden (3), openshadowroot (3), offene (3), markup (3), flag (3), data (3), objekte (3), eigenschaften (3), promise (3), funktionen (3), function (3), operatoren (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), python (2), java (2), git (2), bücher (2), snippets (2), fazit (2), wann (2), sollte (2), praktische (2), welcher (2), selektor (2), internen (2), teile (2), welche (2), dieser (2), leitfaden (2), als (2), deine (2), isoliert (2), bleiben (2), wesentlich (2), hier (2), isolierte (2), deiner (2), echte (2), server (2), globale (2), hinein (2), vollständig (2), modules (2), gekapselt (2), integration (2), rootelement (2), reactdom (2), inside (2), world (2), margin (2), bottom (2), size (2), 2em (2), rgba (2), ddd (2), current (2), uselayouteffect (2), useref (2), type (2), crossorigin (2), umd (2), development (2), angehängt (2), frameworks (2), sorgen (2), müssen (2), retargeted (2), wurden (2), true (2), real (2), inner (2), log (2), bleibt (2), offen (2), alert (2), shadowbutton (2), interactivehost (2), interactive (2), manipulation (2), übergeben (2), component (2), with (2), for (2), slothost (2), ermöglichen (2), reguläre (2), wiederverwendbarer (2), intern (2), alles (2), außen (2), teal (2), block (2), from (2), dies (2), weg (2), knoten (2), keine (2), selektoren (2), klassennamen (2), erste (2), hauptdokuments (2), gestylt (2), zweite (2), demonstriert (2), white (2), styledhost (2), main (2), red (2), definiert (2), außerhalb (2), umgekehrt (2), sichtbar (2), vor (2), macht (2), externen (2), sodass (2), erreichen (2), typeerror (2), textcontent (2), closedshadowroot (2), textinhalt (2), ihrer (2), openshadowhost (2), sein (2), wiederverwendbare (2), 000 (2), hostelement (2), man (2), input (2), range (2), versteckten (2), teilbaums (2), lecken (2), gekapselten (2), workers (2), file (2), suche (2), muster (2), quantoren (2), anker (2), flags (2), animationen (2), url (2), microtasks (2), formulare (2), benutzerdefinierte (2), klassen (2), arrays (2), generatoren (2), advanced (2), await (2), fehlerbehandlung (2), promises (2), chaining (2), error (2), erweitern (2), handling (2), prototypes (2), interaktive (2), property (2), object (2), arrow (2), new (2), syntax (2), variablen (2), functions (2), objects (2), hash (2), 2026, rechte, vorbehalten, entwickler, gemacht, sprache, datenschutzrichtlinie, kontakt, uns, unternehmen, üben, kostenlose, tutorials, seit, 2014, next, previous, yes, helpful, undefined, insertshadowroot, addshadowroot, createshadowroot, umfassende, soll, solide, grundlage, dienen, deinen, projekten, erkunden, nutzen, einfache, komplexe, anwendungen, erstellst, flexibilität, notwendig, damit, handhabbar, beherrschung, moderne, webentwicklung, leistungsstarke, wiederverwendbarkeit, verstehen, anwenden, erläuterten, konzepte, kannst, robuste, wartbarkeit, skalierbarkeit, webanwendungen, verbessern, faustregel, bevorzuge, biete, hooks, anforderung, info, häufigen, fallstricke, seitiges, rendering, bäumen, declarative, shadowrootmode, formularassoziierte, benötigen, zusätzliche, verkabelung, umgebenden, teilzunehmen, form, elementinternals, stylesheets, schriftarten, kaskadieren, automatisch, deklariere, benötigst, übergib, werte, durchdringen, achte, lebt, bereits, scoped, bem, möchtest, frei, hineinfließt, verzichte, darauf, eigenständiges, wiederverwendbares, widget, auslieferst, besonders, seiten, eingesetzt, deren, kontrollierst, einbettungen, design, system, primitive, drittanbietern, jede, erforderlich, wäge, daher, gegen, kompromisse, reguläres, anhängt, stellt, nahtlose, render, createroot, ref, return, standalone, min, cdn, links, folgt, lässt, nahtlos, modernen, angular, vue, wiederverwendbar, kombination, standardrezept, produktionsreife, define, customelements, getattribute, super, constructor, htmlelement, extends, umfasst, definieren, daran, klick, beachte, überschreiten, bubbles, composed, tagname, oben, blubbern, zeigt, innere, tatsächlich, geklickt, dadurch, interne, ziel, noch, verfügbar, retargeting, zugegriffen, direkt, clicked, zuzugreifen, eigenschaft, verständnis, kapselungsgrenzen, direkte, unkompliziert, externe, sorgfältige, handhabung, entspricht, spans, ccc, example, entwicklern, flexibler, regel, umrahmt, gesamte, färbt, projizierten, seite, unterstreichen, gestaltungsrechte, erhalten, hat, freigegeben, unerreichbar, crimson, weight, bold, display, underline, decoration, can, only, reach, parts, exposes, projected, internes, empfohlene, verbrauchern, einzugreifen, oberster, ebene, eingefügten, angesprochen, nachkommen, selector, greift, dann, trägt, active, bedeutet, vollständige, isolation, drei, bieten, kontrollierte, einstiegspunkte, hinweg, spezielle, zwischen, globalen, verhindert, green, yellow, davon, vorteilhaft, stelle, bei, implementierung, ordnungsgemäße, vorhanden, unbeabsichtigte, skripting, vermeiden, warnung, schwieriger, per, skript, erreichbar, devtools, inspektion, seitenskripten, meisten, einfaches, typische, verwendung, gespeicherte, externer, aspekt, verbreitetes, missverständnis, wirklich, tut, schreckt, zufälligen, ursprüngliche, hält, patcht, trotzdem, hineingreifen, keinen, konkreten, grund, denn, testing, einfacher, schlägt, versuch, fehl, weil, geschlossen, wirft, ausgeführt, zurückgegebene, diesen, halte, also, einzige, cannot, access, outside, attempted, update, throws, schränkt, skripten, bessere, versuchen, jedoch, möglich, bereitgestellt, ändern, ihren, zugreifen, ihn, updated, blue, externem, manipuliert, entweder, zugänglich, demselben, sehen, lightblue, attach, create, lightcoral, teilen, jedes, behält, eigenes, andere, liegt, steuerelemente, befinden, genau, deshalb, kollidieren, nie, deinem, video, gewöhnlichen, kinder, normalem, geschrieben, tree, wurzelknoten, zurückgegeben, einige, begriffe, wert, vorab, separaten, dieses, löst, ältesten, probleme, frontend, entwicklung, ids, komponentenübergreifend, überschneiden, zentraler, baustein, isolierten, bereich, anzuhängen, behandelt, warum, wichtig, zusammenfügt, skripte, erfahre, mehr, intl, vibration, notifications, audio, webrtc, geolocation, websockets, service, midi, storage, validation, fullscreen, history, screen, orientation, push, webgl, battery, animations, apis, regexp, sticky, position, katastrophales, backtracking, lookahead, lookbehind, alternation, rückwärtsreferenzen, erfassungsgruppen, gierige, faule, sets, ranges, escaping, sonderzeichen, wortgrenze, mehrzeiliger, modus, anfang, ende, unicode, zeichenklassen, regex, regular, expressions, komposition, animation, indexeddb, localstorage, sessionstorage, cookies, cookie, storing, wiederaufnehmbarer, dateiupload, sent, xmlhttprequest, ursprungsübergreifende, anfragen, abbruch, download, fortschritt, formdata, network, requests, canvas, references, loop, macrotasks, selection, resizeobserver, intersectionobserver, mutation, observer, various, ressourcen, laden, onload, onerror, scripts, defer, domcontentloaded, load, beforeunload, unload, resource, loading, ereignis, submit, clipboard, cut, copy, paste, fokussierung, focus, blur, formulareigenschaften, forms, controls, scrolling, tastatur, keydown, keyup, drag, drop, mausbewegungen, mausereignisse, grundlagen, auslösen, standard, browseraktionen, delegation, bubbling, capturing, introduction, koordinaten, fenstergrößen, scrollen, verändern, attribute, knoteneigenschaften, typ, tag, getelement, browserumgebung, spezifikationen, streams, filereader, blob, textdecoder, textencoder, arraybuffer, binäre, binary, files, fensterübergreifende, kommunikation, popups, window, frames, windows, polyfills, transpiler, bigint, currying, eval, proxy, reflect, miscellaneous, dynamische, imports, export, import, module, iteratoren, generators, iteration, promisification, callbacks, fehler, mixins, checking, instanceof, eingebaute, private, geschützte, statische, klassenvererbung, grundsyntax, classes, prototyp, __proto__, native, prototypale, vererbung, inheritance, performance, optimierung, barrierefreiheit, kompatibilität, manipulationsbibliotheken, fortgeschrittene, techniken, manipulationstechniken, traversieren, arbeiten, auswählen, getter, setter, deskriptoren, configuration, closures, vertieft, binding, debounce, throttle, dekoratoren, weiterleitung, call, apply, settimeout, setinterval, nfe, alte, var, scope, rest, parameter, spread, rekursion, stack, tojson, datum, uhrzeit, destructuring, assignment, keys, values, entries, weakmap, weakset, map, set, iterables, array, strings, math, zahlen, primitiven, types, optional, konstruktor, operator, primitiv, konvertierung, symbol, typen, garbage, collection, objektmethoden, basics, es6, funktionsausdrücke, schleifen, switch, bedingte, nullish, coalescing, logische, vergleichsoperatoren, typkonvertierungen, datentypen, use, strict, kommentare, basic, anmelden, durchsuchen, formatters, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, kurse,
Text of the page (random words):
values entries js destructuring assignment js datum und uhrzeit js json methoden tojson advanced functions js rekursion und stack js rest parameter und spread syntax js variablen scope js das alte var js globales objekt js function objekt nfe js die new function syntax js settimeout und setinterval js dekoratoren und weiterleitung call apply js debounce throttle js function binding js arrow funktionen vertieft js closures object properties configuration js property flags und deskriptoren js property getter und setter javascript html dom dom einführung die dom knoten dom elemente auswählen den dom manipulieren arbeiten mit styles im dom event handling im dom dom traversieren dom manipulationstechniken formulare im dom verwenden fortgeschrittene dom techniken dom manipulationsbibliotheken dom browser kompatibilität dom barrierefreiheit debugging und tools performance optimierung interaktive elemente und widgets prototypes inheritance js prototypale vererbung js native prototypes js prototyp methoden objekte ohne __proto__ classes js class grundsyntax js klassenvererbung statische eigenschaften und methoden private und geschützte eigenschaften in js js eingebaute klassen erweitern js class checking instanceof js mixins error handling js fehlerbehandlung try catch js benutzerdefinierte fehler error erweitern promises async await js einführung callbacks js promise js promise chaining js fehlerbehandlung mit promises promise api promisification microtasks async await generators advanced iteration generatoren async iteratoren und generatoren modules module export und import dynamische imports miscellaneous proxy und reflect eval currying bigint js polyfills transpiler frames and windows popups und window methoden fensterübergreifende kommunikation binary data files arraybuffer binäre arrays textdecoder und textencoder blob file und filereader js streams api document browserumgebung spezifikationen suche getelement queryselector knoteneigenschaften typ tag und inhalt attribute und eigenschaften das dokument verändern styles und klassen fenstergrößen und scrollen koordinaten introduction to events javascript einführung in browser ereignisse bubbling und capturing event delegation standard browseraktionen benutzerdefinierte ereignisse auslösen ui events mausereignisse grundlagen mausbewegungen drag and drop tastatur keydown und keyup scrolling forms controls formulareigenschaften und methoden fokussierung focus blur events change input cut copy paste js clipboard api formulare ereignis und methode submit document and resource loading page domcontentloaded load beforeunload unload scripts async defer ressourcen laden onload und onerror various mutation observer js intersectionobserver js resizeobserver selection und range event loop microtasks und macrotasks javascript references canvas network requests fetch api formdata fetch download fortschritt fetch abbruch fetch ursprungsübergreifende anfragen url objekte xmlhttprequest js server sent events wiederaufnehmbarer dateiupload storing data in the browser cookies document cookie localstorage sessionstorage indexeddb animation css animationen javascript animationen web components web components custom elements shadow dom template element shadow dom slots komposition shadow dom styling shadow dom und events regular expressions js regex muster und flags zeichenklassen unicode flag u und klasse p anker string anfang und ende mehrzeiliger modus der anker flag m wortgrenze b escaping sonderzeichen sets und ranges quantoren und n gierige und faule quantoren erfassungsgruppen rückwärtsreferenzen im muster n und k name javascript alternation or lookahead und lookbehind katastrophales backtracking sticky flag y suche an position methoden von regexp und string javascript apis web animations api file api battery api webgl push api screen orientation api history api console api fullscreen api validation api web storage api web midi api js web workers service workers websockets geolocation webrtc web audio api notifications api die vibration api js intl api javascript shadow dom das shadow dom ermöglicht das anhängen eines gekapselten dom baums an ein element sodass markup styles und skripte isoliert bleiben erfahre mehr über shadow roots slots und wiederverwendbare komponenten das shadow dom ist ein zentraler baustein von web components und ermöglicht es einen gekapselten dom baum mit einem isolierten style bereich an ein element anzuhängen dieser leitfaden behandelt was das shadow dom ist warum es wichtig ist wie man offene und geschlossene shadow roots erstellt styles kapselt inhalte mit slots projiziert und alles in einem wiederverwendbaren custom element zusammenfügt was ist shadow dom shadow dom ermöglicht das anhängen eines separaten versteckten dom teilbaums an ein element markup und styles innerhalb dieses teilbaums sind gekapselt sie lecken nicht nach außen und globale styles lecken nicht hinein das löst eines der ältesten probleme in der frontend entwicklung globales css und ids die sich komponentenübergreifend überschneiden einige begriffe sind es wert vorab definiert zu werden shadow host das reguläre element an das der shadow baum angehängt wird shadow root der wurzelknoten des versteckten baums der von attachshadow zurückgegeben wird shadow tree das dom innerhalb der shadow root light dom die gewöhnlichen kinder des elements die in normalem markup geschrieben sind diese können über slots in den shadow baum projiziert werden der browser selbst verwendet das shadow dom intern die steuerelemente eines video oder input type range elements befinden sich in einem shadow baum den man nicht erreichen kann genau deshalb kollidieren ihre interna nie mit deinem css im folgenden beispiel teilen sich zwei elemente die klasse shadow box aber jedes behält sein eigenes styling da eines im hauptdokument und das andere in einer shadow root liegt head style shadow box padding 10 px border 1 px solid 000 background color lightcoral color white style head body div class shadow box this is styled by the main document div div id host div script create a shadow root const hostelement document getelementbyid host const shadowroot hostelement attachshadow mode open attach shadow dom content shadowroot innerhtml style shadow box padding 10px border 1px solid 000 background color lightblue color black style div class shadow box hello shadow dom div script body kopieren probier es selbst in diesem beispiel gibt es zwei elemente mit demselben klassennamen shadow box das erste element wird durch das css des hauptdokuments gestylt das zweite durch das css des shadow dom wie zu sehen ist beeinflussen die im shadow dom definierten styles die elemente im hauptdokument nicht und umgekehrt dies demonstriert die kapselung die das shadow dom bietet und es ermöglicht isolierte und wiederverwendbare komponenten zu erstellen ohne sich um style konflikte sorgen zu müssen erstellen einer shadow root um eine shadow root zu erstellen verwende die methode attachshadow auf einem element die shadow root kann entweder open oder closed sein eine open shadow root ist von javascript außerhalb des shadow baums zugänglich eine closed shadow root nicht offene shadow root eine offene shadow root ermöglicht den zugriff und die manipulation von externem javascript im folgenden beispiel wird der textinhalt innerhalb der shadow root nach ihrer erstellung manipuliert body div id open shadow host div button id open shadow btn change shadow content button script const openshadowhost document getelementbyid open shadow host const openshadowroot openshadowhost attachshadow mode open openshadowroot innerhtml style shadow content color blue padding 10px border 1px solid black style div class shadow content this is an open shadow root div document getelementbyid open shadow btn addeventlistener click openshadowroot queryselector shadow content textcontent open shadow root content updated script body kopieren probier es selbst in diesem beispiel wird eine schaltfläche bereitgestellt um den inhalt des shadow dom zu ändern da die shadow root offen ist können wir auf ihren inhalt zugreifen und ihn vom hauptdokument aus manipulieren geschlossene shadow root eine geschlossene shadow root schränkt den zugriff von externen skripten ein und bietet bessere kapselung im folgenden beispiel versuchen wir den textinhalt innerhalb der shadow root nach ihrer erstellung zu manipulieren das ist jedoch nicht möglich da sie closed ist body div id closed shadow host div button id closed shadow btn try to change shadow content button script const closedshadowhost document getelementbyid closed shadow host const closedshadowroot closedshadowhost attachshadow mode closed closedshadowroot innerhtml style shadow content color red padding 10px border 1px solid black style div class shadow content this is a closed shadow root div closedshadowhost shadowroot is null for closed roots so this throws a typeerror document getelementbyid closed shadow btn addeventlistener click try closedshadowhost shadowroot queryselector shadow content textcontent attempted to update closed shadow root catch e alert cannot access shadow root content from outside script body kopieren probier es selbst hier schlägt der versuch fehl weil die shadow root geschlossen ist closedshadowhost shadowroot gibt null zurück sodass null queryselector einen typeerror wirft und der catch block ausgeführt wird die von attachshadow mode closed zurückgegebene referenz ist der einzige weg diesen baum zu erreichen halte sie also privat innerhalb deiner komponente ein verbreitetes missverständnis ist dass closed eine komponente wirklich sicher macht das tut es nicht es schreckt nur vor dem zufälligen externen zugriff ab code der die ursprüngliche root referenz hält oder attachshadow patcht kann trotzdem hineingreifen verwende open wenn es keinen konkreten grund gibt interna zu verbergen denn open macht debugging und testing wesentlich einfacher aspekt mode open mode closed host shadowroot gibt die shadow root zurück gibt null zurück externer zugriff erlaubt über host shadowroot nur über die gespeicherte referenz typische verwendung die meisten komponenten einfaches debugging verbergen von interna vor seitenskripten devtools inspektion vollständig sichtbar sichtbar aber schwieriger per skript erreichbar styling im shadow dom warnung stelle bei der implementierung des javascript shadow dom sicher dass eine ordnungsgemäße kapselung vorhanden ist um unbeabsichtigte styling oder skripting konflikte zu vermeiden styles die innerhalb einer shadow root definiert sind beeinflussen keine elemente außerhalb davon und umgekehrt diese kapselung ist vorteilhaft für die erstellung wiederverwendbarer komponenten head style styled box color red background color yellow padding 10 px border 1 px solid green style head body div class styled box this is styled by the main document div div id styled host div script const styledhost document getelementbyid styled host const shadowroot styledhost attachshadow mode open shadowroot innerhtml style styled box color white background color black padding 10px border radius 5px style div class styled box styled by shadow dom div script body kopieren probier es selbst in diesem beispiel gibt es zwei elemente mit dem klassennamen styled box das erste element wird durch das css des hauptdokuments gestylt das zweite durch das css des shadow dom die im shadow dom definierten styles beeinflussen die elemente im hauptdokument nicht und die im hauptdokument definierten styles beeinflussen die elemente im shadow dom nicht das demonstriert wie das shadow dom styles kapselt und so konflikte zwischen den styles der komponente und den globalen styles verhindert spezielle selektoren für das shadow dom kapselung bedeutet keine vollständige isolation drei selektoren bieten kontrollierte einstiegspunkte über die grenze hinweg host wird innerhalb des shadow baums verwendet um das host element selbst zu stylen host active greift nur dann wenn der host diese klasse trägt slotted selector wird innerhalb des shadow baums verwendet um light dom knoten zu stylen die in einen slot projiziert wurden es können nur die auf oberster ebene eingefügten elemente angesprochen werden nicht ihre nachkommen part name wird im äußeren dokument verwendet um ein internes element zu stylen das die komponente explizit mit einem part name attribut freigibt dies ist der empfohlene weg um verbrauchern das theming einer komponente zu ermöglichen ohne in ihre interna einzugreifen body div id theme host span projected from the light dom span div style outer page can only reach parts the component exposes theme host part label text decoration underline style script const host document getelementbyid theme host const root host attachshadow mode open root innerhtml style host display block padding 10px border 2px solid teal label font weight bold color teal slotted span color crimson style div class label part label styled with host and part div slot slot script body kopieren die host regel umrahmt die gesamte komponente label ist intern und privat slotted span färbt den projizierten light dom text ein und part label erlaubt der äußeren seite das label zu unterstreichen für das sie gestaltungsrechte erhalten hat alles was nicht als part freigegeben ist bleibt von außen unerreichbar slots light dom inhalt im shadow dom slots ermöglichen es entwicklern light dom inhalte reguläre dom inhalte in ein shadow dom zu übergeben wodurch das shadow dom flexibler und wiederverwendbarer wird div id slot host span slot title shadow dom slot example span div script const slothost document getelementbyid slot host const shadowroot slothost attachshadow mode open shadowroot innerhtml style container border 1px solid ccc padding 10px style div class container h1 slot name title slot h1 p this is a shadow dom component with a slot for the title p div script kopieren probier es selbst in diesem beispiel wird das slot element verwendet um inhalte vom light dom in das shadow dom zu übergeben das slot attribut des span elements entspricht dem name attribut des slot elements im shadow dom wodurch der inhalt des spans in das shadow dom projiziert wird javascript interaktion mit dem shadow dom die interaktion mit dem shadow dom über javascript erfordert ein verständnis der kapselungsgrenzen die direkte manipulation innerhalb der shadow root ist unkompliziert aber externe interaktion erfordert sorgfältige handhabung zugriff auf shadow dom elemente um auf elemente innerhalb eines shadow dom zuzugreifen verwende die eigenschaft shadowroot div id interactive host div script const interactivehost document getelementbyid interactive host const shadowroot interactivehost attachshadow mode open shadowroot innerhtml button id shadow btn click me button const shadowbutton shadowroot queryselector shadow btn shadowbutton addeventlistener click alert button inside shadow dom clicked script kopieren probier es selbst in diesem beispiel wird auf die schaltfläche im shadow dom üb...
|
