Slik bruker du HTML & Med Shadow DOM
HTML-spor er en av de mest bemerkelsesverdige standarder laget av W3C. Kombiner det med en annen imponerende W3C-standard som heter maler, og du har en fantastisk concoction å jobbe med. Være i stand til lag og legg til HTML-elementer til en side bruker JavaScript er en nødvendig og viktig oppgave.
Det er nyttig når en kodebit skal vises bare på bestemte tidspunkter, eller når du ikke vil skrive ut hundrevis av like strukturert HTML-elementer, men vil automatiser prosessen.
Opprette HTML-elementer i JavaScript er ikke så ønskelig. Det er et problem å måtte sjekke og kontrollere om du har dekket alle kodene, plassert dem i riktig rekkefølge, alt i alt, det er bare også mye å skrive og holde styr på. Denne uroen, men, fikk en løsning når tag dukket opp. Hvis noe må være lagt til siden dynamisk, du kan sette den inne i element.
I dette innlegget vil jeg vise deg hvordan du kan bruke tagger sammen med JavaScript til opprett en mini-HTML-tabellfabrikk som kan skape og fylle hundrevis av lignende tabeller.
De
De tag holder HTML-kode det vil ikke bli gjengitt av nettlesere til den er riktig lagt til i dokumentet, ved hjelp av JavaScript. De element.
EN Skygge DOM ligner på en vanlig DOM (dokumentmodellen tolket fra HTML). Den skaper et scoped tre (et Shadow DOM-tre), som har a roten av sin egen og kan også ha en egen stil.
Når du legger inn Shadow DOM-treet i et element i hoveddokumentet, blir elementet da kalt skyggeverten -, alle barnelementene i skyggeverten som er merket med slot attributt (ikke det samme som det nevnte
The Shadow DOM, som skrevet av denne artikkelen (juli 2017), er støttes bare i WebKit- og Blink-baserte nettlesere men du kan når som helst sjekke den faktiske statusen for nettleserstøtte på CanIUse.
Sette opp HTML-en
Fortsatt forvirrende? La oss se noen kode, starter med element.
Innsiden Inne i malen, Jeg har også lagt til noen grunnleggende stiler for bordet, bruk av , det er en vi vil bruk som en tegning til lage noen tabeller som vil bli lagt til i et dokument. Det er
og ) fungerer som plassholdere for kolonnetitler og celleverdier. Hvert spor har en unik Navn tilskrive det identifiserer den.