Adding missing 'element' and 'content' tags

[jslegers]

The HTML5 shiv does support the 'template' tag, which is a tag that (to my knowledge) is used exclusively in web components.

Web components have other new tags, though. More specificly, I'm thinking of the 'element' and 'content' tags. These are currently not included in the HTML5 shiv.

Could you please add support for the 'element' and 'content' tags to the HTML5 shiv? I'm currently working on an open source js framework / library that - among other things - emulates some behavior of web components. To support those features in old IE, I need the HTML5shiv to support these new tags along with the 'template' tag.

For the development of my project, I'm currently using a 'custom' version of the HTML5 shiv where I added these tags myself, but I'd prefer to use the official version and bet others might be interested in this addition as well.

More info on web components : http://www.w3.org/TR/components-intro/

[aFarkas]

While API could be indeed better, why don't you use the elements-option?

[jslegers]

The elements option makes perfect sense for custom elements, but IMO standard elements like "element" or "content" should be supported by default.

Why shouldn't you support them by default?

[aFarkas]

I didn't said, that I won't add it. I just asked, because you said, that you are using a customized version instead of using the API to extend it.

[jslegers]

I guess I'll adjust my approach by the time the project is released depending on whether or not you have added the new tags to the HTMLshiv by then.

If you have, I could just use the latest version of the shiv. If not, elements-option is probably a better approach than "hacking" the source code...

Nevertheless, I feel like being forced to choose between the elements-option and "hacking" the source code is choosing the lesser of two evils... so I'm really, really looking forward to seeing both tags added to the official source code and not having to consider making that choice :-)

[jonathantneal]

@jslegers, it would be nice to see an implementation. Would you share an example of where this does not work in IE≤8, but does after the shiv?

For instance, the <template> element has a property called content which holds the content of the template in a document fragment. When the author wants to use the content they can move or copy the nodes from this property. Should this functionality be expected in old IE? A polyfill is possible in IE8, but would be significantly more difficult to accomplish in IE6-7.

Object.defineProperty(HTMLGenericElement.prototype, 'content', {
    get: function () {
        var self = this;

        if (self.nodeName === 'template') {
            for (var frag = document.createDocumentFragment(), childNodes = self.childNodes, index = 0, length = childNodes.length; index < length; ++index) {
                frag.appendChild(childNodes[index].cloneNode(true));
            }

            return frag;
        }
    }
});

Also, in the spec you've referenced, they are using a textContent property that does not exist in IE≤8, albeit innerText does the same thing. Should this property be expected?

Object.defineProperty(Element.prototype, 'textContent', {
    get: function () {
        return this.innerText;
    },
    set: function (value) {
        this.innerText = value;
    }
});

[jslegers]

@jonathantneal :

I'm not trying to polyfill web components but rather create an abstraction layer that implements behavior of web components in a cross-browser fashion, using the traditional DOM instead of the shadow DOM. I guess you could say the project is intended to relate to web components the same way Sizzle relates to Document.querySelectorAll. I haven't yet decided on whether to use actual web components or stick with the emulation for browsers that support web components natively, especially considering the differences between how the traditional DOM and the shadow DOM are styled (and considering my preference for the first).

At this early stage, I'm using the following syntax :

template.setTemplate('t')
        .applyTemplate(document.getElementById('news'))
        .setTemplate('u')
        .applyTemplate(document.getElementById('ticker'));

This code first fetches a template with id = 't' and applies it to an element with id = 'news'. It then fetches a template with id = 'u' and applies it to an element with id = 'ticker'.

I'm currently at a stage where I can read inline templates and process content tags both with and without the select property. By modifying the HTMLshiv, I managed to get my code to work in IE6-8. I'm using document.createElement("div") instead of document.createDocumentFragment() to allow storing virtual nodes in a cross-browser fashion.

For now, I'd like to keep my code private, although I am planning to publish it open source once it's ready.