Extending `<head>` with a custom element for mobile best practices

Experiment

The <head is="mobile-head"> custom element extends <head> by providing the boilerplate markup commonly included in <head> (meta tags, mobile viewport, title, app manifest.json, touch icons) as well as default/reset stylesheet for the page.

Instead of contstantly remembering all this stuff, simply declare the super-charged <head>:

<head is="mobile-head">
  <link rel="import" href="mobile-head.html">  
</head>

That's it! Your page will enriched with a bunch of mobile stuff.

Overriding defaults

We're extending <head> using a type extension custom element. This means you can include anything else you'd normally put in <head>, including overrides for mobile-head defaults:

<head is="mobile-head">
  <link rel="import" href="mobile-head.html"> 
  <title>Custom title</title> <!-- override default title -->
  <style>
    /* page styles */
  </style>
  <script src="app.js" async></script> <!-- everyone loves a good script -->
</head>

Notes:

This only works with native Custom Elements / HTML Imports. Sorry webcomponents.js polyfill.
However, browsers witout native native Custom Elements / HTML Imports still pickup children of <head is="mobile-head">. You just won't have a supercharged head with all the mobile defaults.
TODO: More testing is needed to show dynamically added meta tags play nicely with the HTML parser and SEO. Limited testing shows the title and theme color are picked up correctly.
TODO: overrides should be passed in as light dom rather than using data binding.
TODO: investigate if <link rel="import" async> should be used. the async attribute on Imports does not block rendering.

Inspired by the conversation github.com/Polymer/polymer/issues/1022.