html5-template


Share style across web components “of the same type”

◇◆丶佛笑我妖孽 提交于 2019-12-17 13:29:40
问题 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

主宰稳场 提交于 2019-12-17 03:18:43
问题 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

HTML Templates and HTML Import - Inner Script not Executing in Firefox

余生长醉 提交于 2019-12-13 19:32:02
问题 I am using webcomponents.js to polyfill Firefox support of web components. When loading an HTML template through an HTML import, a script within the template does not execute once the custom-element based on the template is added to the DOM of the main page. It does execute when running the site in Chrome (which has native web components support). However, both Firefox and Chrome execute such script when the template is placed within the main page itself. See the example from Eric Bidelmann

html template tag and jquery

爷,独闯天下 提交于 2019-12-10 12:43:58
问题 I've got this situation where I'm trying to use the <template> tag in my html source: <template id="some-id"> <div id="content-container"> <span>{{some_string}}</span> <div> </template> This ends up placing the template in the document but it is not considered to be in the DOM. This means that $("#content-container") is not found in browsers that support template tags. If I search for: $("#some-id") I get this back: <template id=​"some-id">​ #document-fragment <div id="content-container">

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

Custom html tags on page render skip HTML parsing for some reason

允我心安 提交于 2019-12-04 04:29:54
问题 I don't know, why it's happening, but looks like custom html tags cannot parse it's content properly on page load if there's really a lot of such elements. document.registerElement('x-tag', { prototype: Object.create(HTMLElement.prototype, { attachedCallback: { value: function() { console.log(this.innerHTML, this.childNodes); // wrong innerHTML and childNodes once in n-occurrences } }}) } ); Here's an example My hypothesis is that there's some kind of stack, and sometimes this stack just

How to stamp out template in self contained custom elements with vanilla js?

你说的曾经没有我的故事 提交于 2019-12-01 20:23:45
I have a custom component that just shows a tarot card. Before the custom element I have defined a template. In my wc's connectedCallback I attached the template itself to the shadowroot and then stamped it out by cloning it there in the shadowroot as well. I did this for 2 reasons: I want my wc component to be a self contained module; therefore I want to define my template in the same place as my custom element. It seems to be the only way to stamp out my template to make it usable without sticking it in an owner document. var tmpl = ` <template id="tmpl"> <h1 class="tarot-title"><slot name=

Template tag polyfill for IE 11 - not working with table tr and td

ぐ巨炮叔叔 提交于 2019-12-01 06:32:28
I work with polyfill js that allows to process tags for browsers that does not support it. Source code of polyfill on jsfiddle Source question But I've noticed that in IE 11 this polyfill fails to work with templates that include <tr> and <td> tags My sample on jsfiddle The problem is that when we try to get childNodes from template tag node elPlate.childNodes it returns everything but <tr> and <td> children as if there were no such tags inside <template> . Am I missing something? Is there any workarounds for this issue? P.S I was not able to add a comment to source issue due to lack of

HTML Templates JavaScript polyfills

99封情书 提交于 2019-11-30 13:44:28
问题 I'm looking for the most standards-compliant / future-proof method for front-end HTML templating. There exists a relatively new W3C draft specification for HTML Templates, e.g.: <template id="mytemplate"> <img src="" alt="great image"> <div class="comment"></div> </template> Does anyone know if any good JavaScript polyfills already exist to make <template> element usable in a cross-browser way? Preferably complying with this standard. Difficulties According the the HTML5Rocks guide these

HTML Templates JavaScript polyfills

↘锁芯ラ 提交于 2019-11-30 08:24:48
I'm looking for the most standards-compliant / future-proof method for front-end HTML templating. There exists a relatively new W3C draft specification for HTML Templates , e.g.: <template id="mytemplate"> <img src="" alt="great image"> <div class="comment"></div> </template> Does anyone know if any good JavaScript polyfills already exist to make <template> element usable in a cross-browser way? Preferably complying with this standard. Difficulties According the the HTML5Rocks guide these templates have the following properties: "Its content is effectively inert until activated" "Script doesn

工具导航Map