Created
January 21, 2016 18:56
-
-
Save ebidel/1d5ede1e35b6f426a2a7 to your computer and use it in GitHub Desktop.
How to use the WebComponentsReady when lazy loading the webcomponents.js polyfills (http://jsbin.com/dihasa/edit?html,output)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <base href="https://polygit.org/components/"> | |
| <!-- <script src="webcomponentsjs/webcomponents-lite.min.js"></script> --> | |
| <link rel="import" href="paper-input/paper-input.html"> | |
| <link rel="import" href="paper-button/paper-button.html"> | |
| </head> | |
| <body> | |
| <paper-input placeholder="Placeholder text" label="Something fun" float-label></paper-input> | |
| <paper-button>Button</paper-button> | |
| <script> | |
| (function() { | |
| 'use strict'; | |
| function lazyLoadWCPolyfillsIfNecessary() { | |
| var onload = function() { | |
| // For native Imports, manually fire WCR so user code | |
| // can use the same code path for native and polyfill'd imports. | |
| if (!window.HTMLImports) { | |
| document.dispatchEvent( | |
| new CustomEvent('WebComponentsReady', {bubbles: true})); | |
| } | |
| }; | |
| var webComponentsSupported = ( | |
| 'registerElement' in document | |
| && 'import' in document.createElement('link') | |
| && 'content' in document.createElement('template')); | |
| if (!webComponentsSupported) { | |
| var script = document.createElement('script'); | |
| script.async = true; | |
| script.src = 'webcomponentsjs/webcomponents-lite.min.js'; | |
| script.onload = onload; | |
| document.head.appendChild(script); | |
| } else { | |
| onload(); | |
| } | |
| } | |
| /** | |
| * Elements are guartneed to be upgraded and ready at this point. | |
| * It's safe to poke element properties, call methods, etc. | |
| * | |
| * Note: in Chrome (or a browser that natively supports HTML Imports) | |
| * waiting for this event is not needed. Imports will have already | |
| * loaded and upgraded elements by the time the bottom of the page | |
| * is reached. However, waiting for this event consolidates the code | |
| * paths between native and polyfill. | |
| */ | |
| document.addEventListener('WebComponentsReady', function(e) { | |
| alert('WebComponentsReady!!!'); | |
| }); | |
| lazyLoadWCPolyfillsIfNecessary(); | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment