Added source element

[brianblakely]

Renders with display: none by default

[jonathantneal]

I'm all for adding display: none, but I'm not sure we need to shiv a self-closing elements. Thoughts?

[brianblakely]

Hmm, a quick test I performed resulted in display: none not applying to a <source /> when source was not on the shivlist.

[aFarkas]

@brianblakely

Yes, this is a good point. If we don't shiv we do not need to add style support at all. If we add source, we should also add track.

I'm not convinced, that we should add it at all.

Only thing is, that DOM looks a little bit nicer in IE's dev panel. Our style support is really just for the "old" sectioning elements (not fully supported is currently the main-element). Although we have basic style support for dialog or template, too.

[brianblakely]

My impetus for adding source with some default styling was that I saw source elements cause an issue in a team member's rendering when used alongside a Flash fallback. I added this to our local copy of the Shiv, and it helped.

I agree that bringing in track is a good idea, especially now that support has broadened a little among modern UAs.

[aFarkas]

Ok, then. Would you also add the track element for us?

[jonathantneal]

@brianblakely, could you tell me more about what happens in IE or show me what happens?

Unshivved <track> elements will have no display by default, because they will not support children unshivved.

Consider the following snippet from the HTML Spec Preview with a <div> I have added myself.

<video src="brave.webm">
    <track kind=subtitles src=brave.en.vtt srclang=en label="English">
    <track kind=captions src=brave.en.hoh.vtt srclang=en label="English for the Hard of Hearing">
    <track kind=subtitles src=brave.fr.vtt srclang=fr lang=fr label="Français">
    <track kind=subtitles src=brave.de.vtt srclang=de lang=de label="Deutsch">
</video>

<div>Hi</div>

With <track> unshived, IE interprets this correctly.

<video src="brave.webm">
    <TRACK src="brave.en.vtt" srclang="en" label="English" kind="subtitles">
    <TRACK src="brave.en.hoh.vtt" srclang="en" label="English for the Hard of Hearing" kind="captions">
    <TRACK lang=fr src="brave.fr.vtt" srclang="fr" label="Français" kind="subtitles">
    <TRACK lang=de src="brave.de.vtt" srclang="de" label="Deutsch" kind="subtitles">
</video>

<div>Hi</div>

Shivved, the track elements become children of each other, and IE's inspector falsely clones the <div> inside of <video>,, since it was unsure of how to parse the content.

<video src="brave.webm">
    <track src="brave.en.vtt" srclang="en" label="English" kind="subtitles">
        <track src="brave.en.hoh.vtt" srclang="en" label="English for the Hard of Hearing" kind="captions">
            <track lang=fr src="brave.fr.vtt" srclang="fr" label="Français" kind="subtitles">
                <track lang=de src="brave.de.vtt" srclang="de" label="Deutsch" kind="subtitles">
                    <div>Hi (visible in the inspector only)</div>
</video>

<div>Hi</div>

[brianblakely]

That is very interesting, because I have experienced something like the latter behavior with the un-shivved <source>, wherein "improper" self-closing syntax (no />) would create a child hierarchy.

[brianblakely]

This probably won't be merged, nor is it likely that anyone will care. Onward! 😄