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

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

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

How can I create a web component that acts like a form element?

时光总嘲笑我的痴心妄想 提交于 2019-11-28 13:35:38
I am trying to create a web component that is usable in a form element specifically, that has a name , and a value . I recognize that I can create a web component that extends an HTMLInputElement : <input is="very-extended"> but I am trying to create an entirely new element. When creating a regular

Vanilla web-component structure

我的梦境 提交于 2019-11-28 00:27:04
I am looking into structuring vanilla web-components. I have previously used Polymer and like the fact that you can have the template, styles and JavaScript in one file for your component. I want to achieve this with 'vanilla' web components if possible but can't work out how. I've taken the code