custom-element

问题 What I want to know How to also apply the constructor to DOMs.selectTimes . More efficient ways to clean up my code What my code is for I made a script which creates option elements for HTML forms dynamically. I could apply birthYear/birthMonth/birthDay to a constructor. But I can't do it for selectTimes . How can I do it? OR are there any more efficient ways? Here is my code (function() { /* Fetch DOMs */ const DOMs = { selectYear: document.querySelector('#select-birthyear'), selectMonth:

问题 What I want to know How to also apply the constructor to DOMs.selectTimes . More efficient ways to clean up my code What my code is for I made a script which creates option elements for HTML forms dynamically. I could apply birthYear/birthMonth/birthDay to a constructor. But I can't do it for selectTimes . How can I do it? OR are there any more efficient ways? Here is my code (function() { /* Fetch DOMs */ const DOMs = { selectYear: document.querySelector('#select-birthyear'), selectMonth:

问题 Web Components are the hot new thing, and a true web standard, everybody is talking about them and presumably using them, and they seemed like the perfect solution to a problem we have (sharing components across very different sites). So we build a couple of web components. The work fine in Chrome, but not in IE11. Use polyfills maybe? https://www.webcomponents.org/polyfills has a ton of polyfills, but IE11 keeps complaining about class . Compile down to ES5 perhaps? Various sources claim

问题 Web Components are the hot new thing, and a true web standard, everybody is talking about them and presumably using them, and they seemed like the perfect solution to a problem we have (sharing components across very different sites). So we build a couple of web components. The work fine in Chrome, but not in IE11. Use polyfills maybe? https://www.webcomponents.org/polyfills has a ton of polyfills, but IE11 keeps complaining about class . Compile down to ES5 perhaps? Various sources claim

问题 I have a class that extends HTMLElement . From reading this thread https://github.com/Microsoft/TypeScript/issues/574#issuecomment-231683089 I see that I can't instantiate a custom element with out getting a Illegal constructor . Additionally, the registerElement looked promising as it returned the constructor for the custom element but that is now deprecated for using CustomElementRegistry.define() that 1. exists on the window object and 2. returns void. Any solutions will be greatly

问题 I have a class that extends HTMLElement . From reading this thread https://github.com/Microsoft/TypeScript/issues/574#issuecomment-231683089 I see that I can't instantiate a custom element with out getting a Illegal constructor . Additionally, the registerElement looked promising as it returned the constructor for the custom element but that is now deprecated for using CustomElementRegistry.define() that 1. exists on the window object and 2. returns void. Any solutions will be greatly

问题 This is an example of the use of custom elements from developers.google.com: let tmpl = document.createElement('template'); tmpl.innerHTML = ` <style>:host { ... }</style> <!-- look ma, scoped styles --> <b>I'm in shadow dom!</b> <slot></slot> `; customElements.define('x-foo-shadowdom', class extends HTMLElement { constructor() { super(); // always call super() first in the constructor. // Attach a shadow root to the element. let shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot

问题 This is an example of the use of custom elements from developers.google.com: let tmpl = document.createElement('template'); tmpl.innerHTML = ` <style>:host { ... }</style> <!-- look ma, scoped styles --> <b>I'm in shadow dom!</b> <slot></slot> `; customElements.define('x-foo-shadowdom', class extends HTMLElement { constructor() { super(); // always call super() first in the constructor. // Attach a shadow root to the element. let shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot

问题 I'm beginning to use custom elements, and one thing I can't figure out is sharing styling. For example, if I have 2 custom elements, <element-1> and <element-2> , both of which contain <button> 's, and i want all buttons to have a certain styling, e.g. font-size:20px . The options I've considered are: Use a <stylized-button> custom element instead of <button> in the custom elements. This is problematic when externally sourcing <element-1> . Also problematic if you want other styling as well

问题 I'm beginning to use custom elements, and one thing I can't figure out is sharing styling. For example, if I have 2 custom elements, <element-1> and <element-2> , both of which contain <button> 's, and i want all buttons to have a certain styling, e.g. font-size:20px . The options I've considered are: Use a <stylized-button> custom element instead of <button> in the custom elements. This is problematic when externally sourcing <element-1> . Also problematic if you want other styling as well