In my previous post, I introduced the Shadow DOM and made the case for why it is important. 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.
Let’s get started!
The topic we’ll be covering today, Shadow DOM, is big and at times rather confusing. It is also, potentially, one of the most transformative things to happen to web development in at least the last 5-10 years. Rather than attempt to cover it all in one post I’m going to split it up into a series of articles spread out over the coming weeks.
For now let’s start with a general introduction: What is Shadow DOM and why is it important?
webcomponents.org is an awesome, one-stop shop to help you get up to speed on Web Components. Go check it out.
Web Components have come a long way in the past few months and one of the technologies that I’m most interested in is HTML Imports (or “imports”, for short). Imports allow you to load additional documents into your page without having to write a bunch of ajax. This is great for Custom Elements where you might want to import a suite of new tags. I spent the day playing with imports and thought it would be useful to write up my progress.
I ran into a CSS bug today and it brought up an interesting (and important) question: What’s the difference between nth-child and nth-of-type?
Really interesting discussion of the pros and cons of the setImmediate function. For a little backstory checkout this post by Nicholas Zakas (@slicknet)
Here’s a nice tidbit from one of the Chrome devs:
To perform work immediately before the next display - for example to batch up graphical updates as data is streamed in off the network - just make a one-off `requestAnimationFrame()` call. To perform work immediately -after- a display, just call `setTimeout()` from inside the `requestAnimationFrame()` handler.