Build Reusable Widgets with Web Components
createShadowRooton HTML elements that allows the element to update its content by overriding the predefined content from the static mark-up. This is used in conjunction with new supported tags like template and content to create reusable widgets. Here is an example in code:
<template id="detailsTagTemplate"> <style> … </style> <div class="details"> <content></content> </div> </template>
document.querySelector('#detailsTag').textContent = [your message goes here];
This can create magic by dynamically allowing you to project different content inside the details DIV tag. The template element is never rendered and the content tag replaces the text content with your message. This combination opens up a plethora of opportunities, letting you create reusable widgets and use them in your applications without having to worry about cross references.