| // Copyright (c) 2013, the Dart project authors. Please see the AUTHORS file |
| // for details. All rights reserved. Use of this source code is governed by a |
| // BSD-style license that can be found in the LICENSE file. |
| |
| /** Dart APIs for interacting with the JavaScript Custom Elements polyfill. */ |
| library custom_element.polyfill; |
| |
| import 'dart:async'; |
| import 'dart:html'; |
| import 'dart:js' as js; |
| |
| /** |
| * A future that completes once all custom elements in the initial HTML page |
| * have been upgraded. |
| * |
| * This is needed because the native implementation can update the elements |
| * while parsing the HTML document, but the custom element polyfill cannot, |
| * so it completes this future once all elements are upgraded. |
| */ |
| Future customElementsReady = () { |
| if (_isReady) return new Future.value(); |
| |
| // Not upgraded. Wait for the polyfill to fire the WebComponentsReady event. |
| // Note: we listen on document (not on document.body) to allow this polyfill |
| // to be loaded in the HEAD element. |
| return document.on['WebComponentsReady'].first; |
| }(); |
| |
| // Return true if we are using the polyfill and upgrade is complete, or if we |
| // have native document.register and therefore the browser took care of it. |
| // Otherwise return false, including the case where we can't find the polyfill. |
| bool get _isReady { |
| // If we don't have dart:js, assume things are ready |
| if (js.context == null) return true; |
| |
| var customElements = js.context['CustomElements']; |
| if (customElements == null) { |
| // Return true if native document.register, otherwise false. |
| // (Maybe the polyfill isn't loaded yet. Wait for it.) |
| return document.supportsRegister; |
| } |
| |
| return customElements['ready'] == true; |
| } |
| |
| /** |
| * Loads `custom-elements.debug.js` or `custom-elements.min.js` by adding the |
| * script tag to the page. Returns a future that completes when custom elements |
| * are ready (equivalent to [customElementsReady]). |
| * |
| * Normally you should add this to your HTML file |
| * (the Polymer package will do this automatically), but loading dynamically |
| * can be useful for scenarios such as tests. |
| */ |
| Future loadCustomElementPolyfill() { |
| if (!document.supportsRegister && !js.context.hasProperty('CustomElements')) { |
| var script = new ScriptElement() |
| ..src = '/packages/custom_element/custom-elements.debug.js'; |
| document.head.append(script); |
| return document.on['WebComponentsReady'].first; |
| } |
| return new Future.value(); |
| } |