It’s useful when a code snippet has to appear only at certain times, or when you don’t want to type out hundreds of similarly structured HTML elements but want to automize the process.
<template> tag appeared. If something needs to be added to the page dynamically, you can put it inside of the
In this post, I will show you how you can use the
<slot> tag is a placeholder you add to a Shadow DOM which can be made of the content of the
A Shadow DOM is similar to a regular DOM (the document model parsed from HTML). It creates a scoped tree (a Shadow DOM tree), that has a root of its own and can also have a style of its own.
When you insert the Shadow DOM tree into an element in the main document — the element will then be called the shadow host —, all the child elements of the shadow host that are marked with the
slot attribute (not the same as the aforementioned
<slot> tag) will take their place in the newly inserted subtree.
The Shadow DOM, as of writing this article (July 2017), are supported only in WebKit- and Blink-based browsers but you can check the actual state of browser support on CanIUse at any time.
Still confusing? Let’s see some code, starting with the
<template>, there’s a
<table> we’ll use as a blueprint for creating some tables that’ll be added to a document. There are
<slot> elements inside the table cells (
<td>) acting as placeholders for the column titles and cell values. Each slot has a unique
name attribute that identifies it.
We are passionate about innovation, ideas and experience. Tell us about yourself and your project and we can start the ball rolling.