The slides from my talk and workshop titled Web Components Revolution are now live! Please be sure to view them using Chrome Canary and follow the instructions to enable any flags that you might need in order to properly experience native Web Components. The talk and the workshop were serious labors of love and I hope you all enjoy the slides :)
Ah Markdown… Such an amazing tool. I honestly would not be writing this blog post if Markdown did not exist. I tried many times to get in to blogging but I always found the writing experience, whether it be in a GUI or WordPress’ HTML mode, too limiting. Markdown changed all of that for me and I think it’s high time we make it a full fledged member of our developer toolbox.
So today I’m going to show you how to build a Markdown tag using Polymer, a Web Components framework from Google.
Years ago I heard a radio story about a woman hopelessly addicted to cigarettes. Although she tried numerous times to quit, the temptation always won out. So she devised a plan. She told her best friend that if she ever caught her smoking again, she would have to send $5,000 to the Ku Klux Klan. Her best friend, acting as the enforcer, would hold her to it.
We’re getting to a point where we’ve covered most of what there is to know about templates, imports and shadow DOM (1, 2, 3, 4). The end goal for all of these technologies is custom elements, but we’re not quite there yet. I want you to understand the basics of working with JavaScript and the shadow DOM before diving head first into making your own elements. So in this post I’m going to explain some things to watch out for, in particular around how events work. With this knowledge under your belt you’ll be in a good place to start creating your own custom elements.
Let’s get crackin’!
In yesterday’s post we covered the basics of working with styles in Shadow DOM. But we’ve only just scratched the surface! Today we’ll continue from where we left off and explore how to work with distributed nodes and how to poke holes in our components so the outside world can reach in and customize ‘em.
Yesterday’s post was all about coding and structuring your first Shadow DOM elements. But I’m sure most of you were wondering, how do we style these things?!
The use of CSS in Shadow DOM is an interesting and large topic. So large, in fact, that I’m going to split it up over the next couple of posts. Today we’ll learn the basics of using CSS within the shadow boundary, and also how to style our shadow hosts.