custom-element

Custom Element Web Component Shadow DOM Vendor Scripts/Elements

由 微笑、不失礼 提交于 2020-07-21 08:36:22
问题 When working with Custom Elements that leverage Shadow DOM, what is the official approach to injecting 3rd party scripts and elements such as Invisible reCAPTCHA which require scripts such: <script src="https://www.google.com/recaptcha/api.js" async defer></script>` for HTML elements such as a <button> to be leaded and reCAPTCHA to be rendered? shadowRoot doesn't seem to have anything like head , is the script supposed to be added to the created template 's innerHTML ? Or is a <script> to be

Custom Element Web Component Shadow DOM Vendor Scripts/Elements

由 你说的曾经没有我的故事 提交于 2020-07-21 08:36:03
问题 When working with Custom Elements that leverage Shadow DOM, what is the official approach to injecting 3rd party scripts and elements such as Invisible reCAPTCHA which require scripts such: <script src="https://www.google.com/recaptcha/api.js" async defer></script>` for HTML elements such as a <button> to be leaded and reCAPTCHA to be rendered? shadowRoot doesn't seem to have anything like head , is the script supposed to be added to the created template 's innerHTML ? Or is a <script> to be

How to wait for Custom Element reference to be “upgraded”?

由 我与影子孤独终老i 提交于 2020-07-19 01:54:52
问题 I have a reference to an element that will at some point be upgraded to a custom element. How do I wait for it to be upgraded? For example, suppose el is the reference. If it hypothetically had a promise attached to it for this purpose, code could be similar to await el.upgradePromise // do something after it has been upgraded. That of course doesn't exist, but describes what I want to do. Maybe there is no way to do it without polling? If I use polling, what would I poll for (suppose I don't

How to wait for Custom Element reference to be “upgraded”?

由 [亡魂溺海] 提交于 2020-07-19 01:53:07
问题 I have a reference to an element that will at some point be upgraded to a custom element. How do I wait for it to be upgraded? For example, suppose el is the reference. If it hypothetically had a promise attached to it for this purpose, code could be similar to await el.upgradePromise // do something after it has been upgraded. That of course doesn't exist, but describes what I want to do. Maybe there is no way to do it without polling? If I use polling, what would I poll for (suppose I don't

How to pass js Object and functions to a web component

由 一曲冷凌霜 提交于 2020-06-28 03:40:38
问题 Hi All I am a beginner in javaScript and currently exploring JS Web-component and I got stuck due to some use cases 1 ) I want to pass a JS Object into my component like <my-component data=obj ></my-component> And require to use inside my component code Like connectedCallback () { console.log(this.data) // it should print {"name":"xyz" , "role" : "dev"} } 2 ) I also need to pass some functions or maybe call back functions like. function myFunction(e){ console.log(e) } <my-component click

Best way to pass/receive data to/from other sibling components?

由 拜拜、爱过 提交于 2020-06-23 15:57:11
问题 Recently I am trying to learn web components/custom elements and I have came across with a problem and that is pass/receive data to/from other sibling components, I have tried using custom event to do the data passing and receiving but sometimes in some situations, custom event is not really the best way to do it, so what my question is other than custom events, is there any other ways I can pass/receive data to/from other sibling components? index.html <body> <my-component-one></my-component

Deferred setAttribute call in Custom Element constructor causes DOM error. Is it a bug?

由 泄露秘密 提交于 2020-06-15 04:30:34
问题 Here's a fiddle showing an error in console in Chrome 72 and Firefox 63: https://jsfiddle.net/jr2z1ms3/1/ The code is: <script> customElements.define('test-element', class extends HTMLElement { constructor() { super() Promise.resolve().then(() => { this.setAttribute('foo', 'bar') }) } }) </script> <test-element>test</test-element> In Chrome the error is: Uncaught DOMException: Failed to construct 'CustomElement': The result must not have attributes In Firefox the error is: NotSupportedError:

reportValidity() failure with form-associated customElement

由 喜你入骨 提交于 2020-06-12 16:49:07
问题 I have a form-associated customElement which manages its own validity and validation messages. It works as expected as a member of a form; calling form.reportValidity() will place the appropriate error message on the appropriate anchor element. However, calling customElement.reportValidity() results in the error: An invalid form control with name='' is not focusable. My understanding of reportValidity() is that we can call it on individual elements, whether it is a member of an

How to listen for custom events defined web component

由 不问归期 提交于 2020-06-09 11:36:05
问题 I have a custom element my-checkbox that wraps a checkbox, label, styling, etc. When that checkbox is toggled I am defining a CustomEvent named check within my constructor, like so: constructor(){ super(); this._shadowRoot = this.attachShadow({mode: 'open'}); this.checkEvent = new CustomEvent("check", { bubbles: true, cancelable: false, }); } I dispatch that event when the checkbox is toggled: toggleCheckbox(){ this.dispatchEvent(this.checkEvent); console.log(this.checkEvent); ... } I infer

Selecting slot text in Custom Element Shadow DOM

由 匆匆过客 提交于 2020-05-27 05:21:45
问题 I made a simple copy-paste component with regular html/css/js. I've tried to turn it into a web component and can no longer get the copy-paste behaviour to work. The markup inside the shadow DOM is basically <span contenteditable="true"> <slot></slot> </span> <button>Copy</button> The Javascript: class CopyPaste extends HTMLElement { constructor() { super(); let shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.appendChild(copyPasteTemplate.content.cloneNode(true)); }
订阅 custom-element