Site header

Smart Multimedia's Web Component implementation

On this page we are demonstrating a proof-of-concept implementation of a Web Component, which has been tested in IE7 and IE8 and modern browsers. It might even work partially in IE6 (not sure, haven't tested!)

This proof-of-concept was inspired by a post on CSS Tricks detailing how to build Web Components in modern browsers. This example differs from the CSS Tricks post, in that we are aiming to achieve some of the main goals of Web Components, but in IE7 and IE8. The CSS Tricks post mentions that you can find polyfills in development which support IE9+. Ultimately, we'd like to combine our approach with one of the polyfills, to achieve better cross-browser compatability.

Please note: this example only includes just the basics to see what can be achieved in old IE browsers. It is not complete, nor is it designed for easy re-use. If there is enough interest, we may consider turning this into a jQuery Plugin, and which runs our code for IE7 and IE8, but runs an existing polyfill script for IE9+. You could of course use this code from here if you like, when building your own jQuery Plugin, in order to gain some of the web component advantages in your own plugin.

Component

This is my component. Try opening this webpage in IE7.

Here is some more site content, lorem ipsum dolor sit amet

Another note: you should View Source of this page (i.e. before any Javascript has kicked in), don't bother with Firebug or Developer Tools, until you've seen the actual page source.