Hoe HTML & te gebruiken met Shadow DOM
HTML-slot is een van de meest opmerkelijke standaards die door W3C zijn gemaakt. Combineer dat met een andere indrukwekkende W3C-standaard genaamd templates, en je hebt een fantastisch brouwsel om mee te werken. In de gelegenheid zijn maak en voeg HTML-elementen toe naar een pagina met behulp van JavaScript is een noodzakelijke en belangrijke taak.
Het is handig wanneer een codefragment moet verschijnen alleen op bepaalde tijden, of wanneer u niet honderden op dezelfde manier gestructureerde HTML-elementen wilt typen, maar wel wilt automatiseer het proces.
HTML-elementen maken in JavaScript is niet zo wenselijk. Het is een hele klus om te controleren en opnieuw te controleren of je alle tags hebt afgedekt, ze in de juiste volgorde hebt geplaatst, alles bij elkaar is er gewoon te veel te typen en bij te houden. Deze onrust echter, heb een oplossing wanneer de tag verscheen. Als er iets moet zijn dynamisch toegevoegd aan de pagina, je kunt het in de element.
In deze post zal ik je laten zien hoe je de kunt gebruiken tags samen met JavaScript token maak een mini-HTML-tabelfabriek die honderden vergelijkbare tabellen kan maken en vullen.
De
De tag bevat HTML-code die wordt niet weergegeven door browsers totdat het correct is toegevoegd aan het document, met behulp van JavaScript. De element.
EEN Schaduw DOM is vergelijkbaar met een gewone DOM (het documentmodel is geparseerd vanuit HTML). Het creëert een scopedboom (een schaduw-DOM-structuur), die een eigen root en kan ook een hebben stijl van zijn eigen.
Wanneer u de schaduw-DOM-structuur in een element in het hoofddocument invoegt, wordt het element het schaduw host -, alle onderliggende elementen van de schaduwhost die zijn gemarkeerd met de sleuf attribuut (niet hetzelfde als de hiervoor genoemde
De Shadow DOM, zoals van het schrijven van dit artikel (juli 2017), zijn alleen ondersteund in WebKit- en Blink-gebaseerde browsers maar u kunt op elk moment de actuele status van de browserondersteuning op CanIUse bekijken.
De HTML instellen
Nog steeds verwarrend? Laten we wat code zien, te beginnen met de element.
Binnen In de sjabloon, Ik heb ook toegevoegd enkele basisstijlen voor de tafel, met behulp van de , er is een goed gebruik als een blauwdruk voor een aantal tabellen maken die wordt toegevoegd aan een document. Er zijn
en ) fungeren als tijdelijke aanduidingen voor de kolomtitels en celwaarden. Elke slot heeft een uniek naam ken dat toe identificeert het.