Create your own custom HTML tags/component...TODAY

#1

Post by dandonkulous » Tue, May 01, 2012, 11:49 PM UTC

Q: What if we could easily extend HTML with tags that do more than just tell Google's crawler about the layout of our content?

A: We can, right now, today, on a hell-of-a-lot-of existing browsers and devices: https://github.com/csuwldcat/WebComponents

Create your own custom HTML tags/component...TODAY
github.com

Re: Create your own custom HTML tags/component...TODAY

#2

Post by gkoberger » Wed, May 02, 2012, 12:35 AM UTC

This is actually pretty useful. Basically, it lets you do something like this:

    document.createElement('slider')

Or just write it in HTML like this:

And as soon as the page is about to render it, the script intercepts it and turns it into something like this (with styles, events, etc):

You could write a jQuery plugin that does this, however you'd have to initialize it every time you added the element into the page.

Kind of like a DIY shadow DOM: http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/

Re: Create your own custom HTML tags/component...TODAY

#3

Post by dandonkulous » Wed, May 02, 2012, 2:29 AM UTC

gkoberger wrote: post #2

This is actually pretty useful. Basically, it lets you do something like this: document.createElement('slider') Or just write it in HTML like this: And as soon as the page is about to render it, the script intercepts it and turns it into something like this (with styles, events, etc): O You could write a jQuery plugin that does this, however you'd have to initialize it every time you added the element into the page.…

A couple quick, important clarifications:

The parse does not turn the custom tags into divs, there is no need to do that. These are fully capable, valid tags and exist in the source just the way you write them: . Check out the demo linked to in the repo and you'll see ;)

Also, the way the code works is even a bit better than you described in the dynamic creation case. Let's take your example:

    var slider = document.createElement('slider');

you would actually receive a _fully inflated_ element that is already event-bound when it is returned out of document.createElement, pretty sweet right? The innerHTML value of slider would literally read:

""