html-imports

Javascript inside HTML import not affecting imported HTML

由 不羁的心 提交于 2019-12-08 05:17:20
问题 I am importing an html document, form.html , from a script located in my index.html file. form.html is a basically a fragment of HTML and at the bottom of the html is an internal script that attaches the html to the main document: Afterwards, I reference an external script that is supposed to do some stuff to the HTML in form.html . However, this fails to have an affect in Firefox. If I inspect the <head> of the main document in Firefox developer tools, I can see the "document fragment"

Template html and template string in web components

由 我是研究僧i 提交于 2019-12-08 01:03:54
问题 Is it better to use html template (and then html import) to create web components or to use template string? What are pros and cons of these methods? 回答1: Using html template files is better for reuse: the same file can be used in different web components. Also they are better displayed in most IDEs as they are recognized as full HTML code. Using template strings is faster (inline). They don't rely on HTML Imports which is not adopted by every browser vendors. Also you can use template

How can a web-component get its own styles (width etc) as soon as possible?

由 女生的网名这么多〃 提交于 2019-12-07 00:37:30
Consider the following test-element web component definition (vanilla JavaScript running on Google Chrome, not Polymer), that creates a simple component with width=500px . Its attachedCallback function outputs its width to the console, and then sets up an asynchronous delay to do it again: test-element.html <style> test-element { display: inline-block; width: 500px; } </style> <script> (function (window, document) { var proto = Object.create(HTMLElement.prototype); proto.attachedCallback = function () { // Direct output. console.log("(1) test-element.width = ", this.offsetWidth); // Delayed

HTML import not deduping

由 会有一股神秘感。 提交于 2019-12-04 20:23:31
So the first fact section in this HTML import article states that html imports know better than to request (and execute - if javascript) resources multiple times. This works within the framework of HTML imports but doesn't work for other type of imports (as in javascript). In this network view of the devtools you can see Polymer.html being loaded first from javascript ( d3.js ) then again from HTML imports ( my-app.html ) which I wasn't expecting. Is there a way to explicitly tell HTML imports that a resource has already been loaded (as in from javascript in this case)? If I understand this

HTML Import webcomponents polyfill not working in firefox

由 三世轮回 提交于 2019-12-02 12:37:42
I am trying webcomponents in a sample app. Since some of the specs are not included in some browsers, i tried using polyfill for those. In Mozilla firefox, i tried by enabling the key dom.webcomponents.enabled and adding some polyfills (that are not in browser). I have used HTML Import polyfill from webcomponents.js polyfill. Still HTMLImport is not working in firefox, internet explorer (even with polyfill). ( https://github.com/webcomponents/webcomponentsjs ) I also tried customElements v1 polyfill, not working in internet explorer and firefox. ( https://github.com/webcomponents/custom

How to package, or import Html-Templates without Html-Imports

由 孤者浪人 提交于 2019-11-29 07:33:15
Since Html-Imports are now deprecated in Chrome ( https://www.chromestatus.com/feature/5144752345317376 ) and will be removed, I wonder what the alternatives are. I'm currently using Html-Imports to import Html-Templates. I see only two alternatives so far: Bundling all HTML-files together in one file. This would also improve donwload times in production, but this would decrease encapsulation and modularization. There is a polymer-bundler that would do the job by traversing the HTML-Import-Statements in separated HTML-Files. But this would mean, that HTML-Imports remain in my Code even if they

How to package, or import Html-Templates without Html-Imports

由 时光毁灭记忆、已成空白 提交于 2019-11-28 00:58:44
问题 Since Html-Imports are now deprecated in Chrome (https://www.chromestatus.com/feature/5144752345317376) and will be removed, I wonder what the alternatives are. I'm currently using Html-Imports to import Html-Templates. I see only two alternatives so far: Bundling all HTML-files together in one file. This would also improve donwload times in production, but this would decrease encapsulation and modularization. There is a polymer-bundler that would do the job by traversing the HTML-Import

Share style across web components “of the same type”

由 拜拜、爱过 提交于 2019-11-27 15:20:52
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 component. Questions: Does it have any performance implications when I create tons of instances of the

How to execute a script when the custom element is upgraded

由 泄露秘密 提交于 2019-11-27 05:56:51
问题 I have defined a custom element and I want to execute a script only when the custom element is upgraded to its registered type. The use case is that I must call a custom method. My main html file looks like this: <project-list></project-list> <script> var project_list = document.getElementsByTagName("project-list")[0] project_list.custom_method("some_data"); </script> The custom element is registered in a HTML import like this: <script> "use strict"; var currentScript = document.

web component (vanilla, no polymer): how to load <template> content?

由 风流意气都作罢 提交于 2019-11-27 04:53:20
问题 i'm new on web component. I checked some example, but i really can't figure out how to load (insert in the DOM) the content of a of a separate web component. Starting from this example , I put this code in a file named my-element.html: <template id="my-element"> <p>Yes, it works!</p> </template> <script> document.registerElement('my-element', class extends HTMLElement { constructor() { super(); let shadowRoot = this.attachShadow({mode: 'open'}); const t = document.querySelector('#my-element')
订阅 html-imports