If you're hosting a party, it gets stuffy if everyone is crammed into the same room. You want the option of distributing groups of people across multiple rooms. Elements hosting Shadow DOM can do this too, that is to say, they can host more than one shadow root at a time.

The concept of templating is not new to web development. In fact, server-side templating languages/engines like Django (Python), ERB/Haml (Ruby), and Smarty (PHP) have been around for a long time. In the last couple of years however, we've seen an explosion of MVC frameworks spring up. All of them are slightly different, yet most share a common mechanic for rendering their presentational layer (aka da view): templates.

Recently I was working with a client to train their internal teams on how to build web applications. During this process it occurred to me that the way we presently architect the front-end is very strange and even a bit broken. In many instances you’re either copying huge chunks of HTML out of some doc and then pasting that into your app (Bootstrap, Foundation, etc.), or you’re sprinkling the page with jQuery plugins which have to be configured using JavaScript. It puts us in the rather unfortunate position of having to choose between bloated HTML or mysterious HTML, and often we choose both.

Today, we’ll get our hands dirty with some code! By the end of this post, you’ll be able to create your own encapsulated widgets that pull in content from the outside world and rearrange their bits and pieces to produce something wholly different.

Web Components is a set of cutting edge standards. Does this mean you have to decide when to use HTML/JavaScript, and when to use Web Components? No! HTML and JavaScript can make interactive visual stuff. Widgets are interactive visual stuff. It makes sense to leverage your HTML and JavaScript skills when developing a widget. The Web Components standards are designed to help you do that.

Think about how you load different types of resources on the web. For JS, we have <script src="">. For CSS, your go-to is probably <link rel="stylesheet"<. For images it's <img>>. Video has <video>. Audio, <audio>… Get to the point! The majority of the web's content has a simple and declarative way to load itself. Not so for HTML.