html5-template

External Styling for CustomElements V1 & ShadowDOM

由 怎甘沉沦 提交于 2019-12-25 09:08:23
问题 Whilst this may seem to be a duplicate question those asked previously have been based around Polymer, not native CustomElements, and this is about the css itself, not penetrating the ShadowDOM or Custom CSS Properties / Variables So here we have a simple Custom Element (note: as of writing this only works in newer Chrome versions) class StyleMe extends HTMLElement { constructor () { super(); let shadow = this.attachShadow({ mode: 'closed' }); shadow.appendChild(document.querySelector('#style

Returning contents of template tag as string

由 試著忘記壹切 提交于 2019-12-24 12:22:33
问题 I was wondering if there was a way of getting the contents of the elements within a template tag and returning it as a string? At the moment it seems like it is returning something along the lines on [object document fragment] but want just the html content inside. function CreateWidget(widget) { //Check if browser supports templates if ('content' in document.createElement('template')) { //Grab the template's content and assign it to a variable so we only have the gut of the template var

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

由 倖福魔咒の 提交于 2019-12-20 02:14:19
问题 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

Disqus comments don't work in a polymer custom element

由 ￣綄美尐妖づ 提交于 2019-12-19 11:45:19
问题 I don't know how to make a disqus comments code to work inside of my custom elements. Structure of my site: | index.html --------\ my-app.html (custom element) ----------------\ my-testView1.html (custom element) ----------------\ my-testView2.html (custom element) I need to put disqus comments inside my-testView1.html and my-testView2.html Structure of index.html : <body> <my-app> <div class="disqusClass1" id="disqus_thread"></div> <div class="disqusClass2" id="disqus_thread"></div> <my-app>

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

由 99封情书 提交于 2019-12-19 08:58:19
问题 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

using paper datatable in angular2

由 天涯浪子 提交于 2019-12-18 07:07:36
问题 I have been struggling for quiet a while about using paper-data-table (paper data table by David Mulder) in my angular 2 application. The problem im facing is described in the data table issue: Issue opened regarding using the table in angular 2 applicaiton Basically there is a use of the polymer undocumented dataHost property that gets incorrect value when using it in angular2. I have tried a few angles of solutions which I cant make any of them work completely: 1) I tried to find a way to

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">
订阅 html5-template