HTML - tags - <slot>

#118 of 147
slot

 <html>
 <body>
     <book-details>
         <span slot="title">Crime and Punishment</span>
         <span slot="author">Fyodor Dostoyevsky</span>
         <span slot="date">1866</span>
     </book-details>
     
     <template id="book-details-template">
         <b>Title:</b> <slot name="title">NEED TITLE</slot> <br />
         <b>Author:</b> <slot name="author">NEED AUTHOR</slot> <br />
         <b>Date:</b> <slot name="date">NEED DATE</slot> <br />
     </template>
     
     <script>
         var template = document.getElementById('book-details-template').content;
         var books = document.getElementsByTagName('book-details');
         for(var i=0; i < books.length; i++) {
             var book = books[i];
             var shadowRoot = book.attachShadow({ mode: 'open' });
             var clone = template.cloneNode(true);
             shadowRoot.appendChild(clone);
         }
     </script>
 </body>
 </html>
 

The slot element marks the insertion point for Shadow DOM content.

Experimental

The Shadow DOM API is part of the Web Components standard. It is used to create a private DOM tree under a specified element (typically a custom HTML element). All code inside the Shadow DOM (HTML, CSS and JS) is isolated and cannot affect the layout of the containing page. This allows component authors to create fully encapsulated web components. The HTML5 video element, for example, is implemented using the Shadow DOM.

A live example:


Crime and Punishment Fyodor Dostoyevsky 1866

N of

Ads by Google

Ask a question, send a comment, or report a problem - click here to contact me.

© Richard McGrath