I must have come across mention of “web Components” one of the times I reviewed the emerging standards of HTML5 – but put them to one side against the day when they became concrete enough to be worth following up. For them to become established we needed browser support for some specific items, namely; HTML Imports, Shadow DOM, Templates and the ability to define and consume web components. I think I looked away for too long but fortunately ran into a Google IO presentation on Polymer http://www.polymer-project.org/resources/video.html
It looked to me, when watching the video, as if web components addressed a few issues that came up while we were building a very large web application as part of our SBRI “Proof of Concept” project earlier this year. So what were some of the things we found “good” and some things we found “bad” when building a very large web application?
CSS3 was a surprise late entry on the “bad” list. Don’t get me wrong, CSS is brilliant and allows us to style and add functionality to a web page in an ordered and predictable way. However there are times when you just wish you could turn it off for a given section on a page. You have some html elements that are being styled incorrectly at a particular point as “rules” cascade. Unpicking or backtracking the cascade and then adding to the CSS to override particular styling for specific elements (or groups of elements) can be time consuming and adds to the volume of traffic that needs to be downloaded to render the page in the browser. Wouldn’t it be nice to be able to just define some specific CSS rules that apply to a given web page section with no interference from any cascaded or global settings? What you need of course is a “Shadow DOM” – a place where CSS rules can only penetrate from “outside” when you explicitly define that behaviour.
This is not a technical blog (although this post strays into technique) so I won’t get into the detail of getting web components up and running but I can say that it is very simple and you can ignore things like bower, python web servers and node.js (not that node is not a great tool in its own right) and get things quickly working with a vanilla web server (even IIS Express).