html-imports | 易学教程

If HTML Imports are dead/deprecated what's the best way to import your web component (X-Tag) template?

阅读更多关于 If HTML Imports are dead/deprecated what's the best way to import your web component (X-Tag) template?

问题 I'm working on my first X-Tag application and on it's page it says it's meant to work with Web Component API's such as 'Custom Elements, Shadow DOM, Templates, and HTML Imports'. I've started working on my templates, but what's the best option to import them, now that HTML Imports have been deprecated? 回答1: AFAIK, HTML Imports have not been deprecated (or is it new?). It's only Mozilla who said it won't implement it for Firefox. But the polyfill is still available, and supported. Since ES6

Polymer 1.0 on firefox ReferenceError: Polymer is not defined

阅读更多关于 Polymer 1.0 on firefox ReferenceError: Polymer is not defined

问题 Hello I have a working Polymer 1.0 web page on Chrome and Opera. Now I need the page to run in Firefox and Safari. I have the following test: <!DOCTYPE html> <html> <head> <?php use Cake\Routing\Router; ?> <?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents-lite.min.js'); ?> <link rel="import" href="<?= Router::url('/'); ?>bower_components/polymer/polymer.html"> <dom-module id="test-element"> <template > <h1>It works</h1> </template> <script> Polymer({ is: "test

Polymer 1.0 on firefox ReferenceError: Polymer is not defined

阅读更多关于 Polymer 1.0 on firefox ReferenceError: Polymer is not defined

Share style across web components “of the same type”

阅读更多关于 Share style across web components “of the same type”

问题 If I understand it correctly, creating an instance of a web component can be summed up as creating a shadow root and copying the markup, e.g. from a template into it: var Template = document.querySelector('#myTemplate'); var TemplateClone = document.importNode(Template.content,true); TargetElement.appendChild(TemplateClone); Of course, if the template contains css rules in a style-tag, those will be copied as well. Thus we can have scoped styles which belong to the internal markup of a web

Nested element (web component) can't get its template

阅读更多关于 Nested element (web component) can't get its template

问题 I made a simple example using Web Components with two custom elements (v1) where one is nested in another. index.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="import" href="app-container.html"> </head> <body> <app-container></app-container> </body> </html> app-container.html: <link rel="import" href="toolbar.html"> <template id="app-container

Polymer: can't get this.data passing in from host

阅读更多关于 Polymer: can't get this.__data__ passing in from host

问题 I have a very simple project: app/ parent.html child.html index.html I try to pass data from parent to child and then get them within Polymer(): index.html <!DOCTYPE html> <html> <head> <link rel="import" href="bower_components/polymer/polymer.html"> <link rel="import" href="app/parent.html"/> </head> <body> <h1>Hello Paul!</h1> <x-comphost></x-comphost> </body> </html> app/parent.html <link rel="import" href="child.html"/> <dom-module id="x-comphost" noscript> <template> <h4>Hello, man!</h4>

Attached ShadowRoot using Polyfill is not query-able

阅读更多关于 Attached ShadowRoot using Polyfill is not query-able

问题 In the following sample, I am trying to create a menu component to experiment component hierarchy. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="robots" content="index, follow"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Sample Menu App</title> <script src="js/webcomponents-lite.js"></script>  <link rel="import" href="components

Webcomponents Polyfill not working

阅读更多关于 Webcomponents Polyfill not working

问题 I am trying to polyfill webcomponents as explained at https://www.webcomponents.org/polyfills/ since I wanted my sample app to work on both Chrome and Firefox. However I am getting ReferenceError: customElements is not defined error in Firefox. See my code below on the index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="robots" content="index, follow"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <meta http-equiv="x

What is the difference between `HTMLImports.whenReady` and `window.addEventListener('WebComponentsReady', function(e) {`

阅读更多关于 What is the difference between `HTMLImports.whenReady` and `window.addEventListener('WebComponentsReady', function(e) {`

问题 What is the difference between HTMLImports.whenReady and window.addEventListener('WebComponentsReady', function(e) { ? Polymer's official documentation says: "To define an element in your main HTML document, define the element from HTMLImports.whenReady(callback). callback is invoked when all imports in the document have finished loading." Webcomponents.org's official documentation on imports says: Under native imports, tags in the main document block the loading of imports. This is to ensure

Import HTML document using HTML link rel

阅读更多关于 Import HTML document using HTML link rel

问题 I am trying to import an HTML document into my main document using <link rel="import" href="my-tabs.html"> but it doesn't seem to be working. I am following this presentation, using Chrome 28, and I have enabled these two flags in about:flags : Enable experimental WebKit features Enable experimental JavaScript Am I missing something? or is there another flag I need to enable to get it? 回答1: HTML Imports only work natively in Chrome Canary (and even there they're only half-baked). For that