<head>
with a custom element for mobile best practicesThe <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.
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:
<head is="mobile-head">
. You just won't have a supercharged head with all the mobile defaults.<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.