custom-element

ShadowRoot property is null despite open

由 大憨熊 提交于 2020-05-15 11:18:19
问题 I'm trying to access the ShadowRoot on my element and the property element.shadowRoot is returning null . The ShadowDOM is defined as mode: 'open' , which is correct, I can even console.log(element) to see all of the properties and shadowRoot IS an object of ShadowRoot type. In my app I am trying to access the property like so: let el = document.getElementById('elementId'); ... console.log(el); console.log("this.shadowRoot = ???"); console.log(el.shadowRoot); Is this okay? Attached are the

Remove event listener that has been added using bind(this)

由 梦想的初衷 提交于 2020-05-13 04:35:09
问题 How do I remove the click listener I bound to window in the constructor below? I need it to listen on window , and I need access to the button instance inside it. class MyEl extends HTMLButtonElement { constructor() { super(); this.clickCount = 0; window.addEventListener('click', this.clickHandler.bind(this)); } clickHandler(e) { if (e.target === this) { this.textContent = `clicked ${++this.clickCount} times`; window.removeEventListener('click', this.clickHandler); } } disconnectedCallback()

What is the point of the “is” syntax when extending elements in web components?

由 拥有回忆 提交于 2020-04-26 04:53:33
问题 In web components, to register an element you simply type: var XFoo = document.registerElement('x-foo', { prototype: Object.create(HTMLElement.prototype) }); To create an element you can do one of these: <x-foo></x-foo> var xFoo = new XFoo(); document.body.appendChild(xFoo); var xFoo = document.createElement( 'x-foo') document.body.appendChild(xFoo); This is all fine and dandy. The issues start when you are talking about extending existing elements. var XFooButton = document.registerElement(

What is the point of the “is” syntax when extending elements in web components?

由 ♀尐吖头ヾ 提交于 2020-04-26 04:52:57
问题 In web components, to register an element you simply type: var XFoo = document.registerElement('x-foo', { prototype: Object.create(HTMLElement.prototype) }); To create an element you can do one of these: <x-foo></x-foo> var xFoo = new XFoo(); document.body.appendChild(xFoo); var xFoo = document.createElement( 'x-foo') document.body.appendChild(xFoo); This is all fine and dandy. The issues start when you are talking about extending existing elements. var XFooButton = document.registerElement(

What is the point of the “is” syntax when extending elements in web components?

由 主宰稳场 提交于 2020-04-26 04:50:09
问题 In web components, to register an element you simply type: var XFoo = document.registerElement('x-foo', { prototype: Object.create(HTMLElement.prototype) }); To create an element you can do one of these: <x-foo></x-foo> var xFoo = new XFoo(); document.body.appendChild(xFoo); var xFoo = document.createElement( 'x-foo') document.body.appendChild(xFoo); This is all fine and dandy. The issues start when you are talking about extending existing elements. var XFooButton = document.registerElement(

Why does my shadow dom break my custom element?

由 扶醉桌前 提交于 2020-04-17 22:55:12
问题 Here is a fiddle demonstration of the custom element: https://jsfiddle.net/c4bLo097/5/ Here is the code from the fiddle: JavaScript: window.customElements.define('test-element', class TestElement extends HTMLElement { constructor() { super() let contents = ` <style> :host { display: block; } :host([hidden]) { display: none; } </style>` // convert string to nodes let template = document.createElement('template') template.innerHTML = contents // create shadow this.attachShadow({mode: 'open'}) /

How do I append a Web Component created programmatically?

由 浪子不回头ぞ 提交于 2020-03-23 07:37:09
问题 I created a Web Component class to extend div , and used customElements.define() to define it: class Resize_Div extends HTMLDivElement { constructor(){ super(); this.cpos = [0,0]; <etc.> } connectedCallback() { console.log( 'connected' ); } <etc.> } customElements.define('resize-div', Resize_Div, { extends:'div'} ); If I test in html, as <div is:'resize-div'> </div> , it works fine. Now I want to use createElement to create an instance programmatically, using the options to declare the is ,

How should I reference assets in angular custom element (Web Components)

由 你离开我真会死。 提交于 2020-03-02 00:12:30
问题 I have created a web component and I referenced image from my asset folder in there as below <img src="./assets/bot.png" alt="{{botTitle}}" /> on local everything is fine, I published my custom element to firebase host and javascript, css and asset folder already exist on my host. then I tried to use my web component in another html peage as below <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>TMIBot</title> <base href="/"> <meta name="viewport" content="height=device

Custom elements works for Safari but not for Firefox and Chrome

由 筅森魡賤 提交于 2020-02-04 22:56:24
问题 I'm sure I'm missing something fundamental from the spec, but after building a large set of custom elements on the Mac running on Safari, I find they don't work on Firefox and Chrome. What am I missing? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>NoCE</title> <script> class NoCE extends HTMLElement { constructor(args) { super(); } connectedCallback() { this.innerHTML = "<p>It Works</p>"; } attributeChangedCallback(name, oldValue, newValue, namespaceURI) {} disconnectedCallback

Clarification on custom web components and lifecycle callbacks

由 China☆狼群 提交于 2020-02-02 11:45:22
问题 I was hoping to get some clarification as it relates to custom elements and their lifecycle callbacks: I have some confusion with the element created callback. The spec says something like: "called when each instance of an element is created." to my thinking, an instance is inserted into the dom 'virtually' right after it is created, and so the benefit of having these two callback essentially back to back in the document flow. I have also read online that the created callback is more closely
订阅 custom-element