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:

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