Skip to content

Instantly share code, notes, and snippets.

@VandeurenGlenn

VandeurenGlenn/app.js

Created December 26, 2015 13:38
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save VandeurenGlenn/fc63af20d809bd4ddb9b to your computer and use it in GitHub Desktop.
Save VandeurenGlenn/fc63af20d809bd4ddb9b to your computer and use it in GitHub Desktop.
Download ZIP
webcomponents feature detection
Raw
app.js
(function(document) {
'use strict';
// Feature detection
// Check if Web Components are supported
var webComponentsSupported = ('registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template'));
// Load Web Components when not supported
if (!webComponentsSupported) {
var script = document.createElement('script');
script.src = '${0:bower_components}/webcomponentsjs/webcomponents-lite.js';
document.head.appendChild(script);
};
// Grab a reference to the auto-binding template
// Visit http://goo.gl/Dx1u2g for more info on auto-binding
var app = document.querySelector('#app');
// Listen for dom-change event to know when bindings
// have resolved and content has been stamped to the page
app.addEventListener('dom-change', function() {
console.log('Our app is ready to rock!');
});
// See https://github.com/Polymer/polymer/issues/1381
window.addEventListener('WebComponentsReady', function() {
// imports are loaded and elements have been registered
});
})(document);
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<!-- Mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Chrome / Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="black">
<link rel="icon" href="icon.png">
<!-- Safari / iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png">
</head>
<body unresolved>
<template id="app" is="dom-bind">
...
</template>
</body>
<script src="app.js"></script>
</html>
@aendra-rininsland
Copy link

Thanks for this, was needing a way to detect whether webcomponentsjs had loaded or not.

Quick question, app.js line 12, bit at the beginning of '${0:bower_components}/webcomponentsjs/webcomponents-lite.js'; — I've never seen that path syntax before and can't find anything further on MDN about it. What does it do? Is it just regex or something? Or is it put as a placeholder so as to say "put path to bower_components here"? Thanks!

@VandeurenGlenn
Copy link
Author

@Aendrew Sorry I didn't notice your comment, ${0:bower_components} is used in atom snippets checkout snippets for more info.

So to answer your question you can see it as an placeholder and put your location there.

Hope this helps!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment