custom-element | 易学教程

Vanilla Custom Element repeater for <option>, <li>, <td>

阅读更多关于 Vanilla Custom Element repeater for , ,

I'm currently trying to implement a repeater WebComponent to allow the company to easily create front-end without depending on any framework (decision took by architecture). Here's my current code: <ul> <company-repeat datas='[{"name": "NameValeur", "value": "valeurId"}, {"name": "NameObject", "value": "objectId"}]'> <li>${name}</option> </company-repeat> </ul> <select name="" id=""> <company-repeat datas='[{"name": "NameValeur", "value": "valeurId"}, {"name": "NameObject", "value": "objectId"}]'> <option value="${value}">${name}</option> </company-repeat> </select> The list is rightly working

Creating custom element without using class keyword

阅读更多关于 Creating custom element without using class keyword

This is actually more a question about the object-orientation model in ES6. However I am going to use the creation of a new custom element as an example. So the new and shiny (as of today) method to create a new custom element is via customElements.define() which take in a tag name , a constructor , and options (which is optional) according to MDN , Google , and of course the spec . All the documentation listed uses a variation of the new class keyword for constructor . Assuming I don't like the new class syntax, and considering for most part class is a syntatic sugar (according to this

HTML Import webcomponents polyfill not working in firefox

阅读更多关于 HTML Import webcomponents polyfill not working in firefox

I am trying webcomponents in a sample app. Since some of the specs are not included in some browsers, i tried using polyfill for those. In Mozilla firefox, i tried by enabling the key dom.webcomponents.enabled and adding some polyfills (that are not in browser). I have used HTML Import polyfill from webcomponents.js polyfill. Still HTMLImport is not working in firefox, internet explorer (even with polyfill). ( https://github.com/webcomponents/webcomponentsjs ) I also tried customElements v1 polyfill, not working in internet explorer and firefox. ( https://github.com/webcomponents/custom

Custom Element getRootNode.closest() function crossing multiple (parent) shadowDOM boundaries

阅读更多关于 Custom Element getRootNode.closest() function crossing multiple (parent) shadowDOM boundaries

问题 I spent some time searching but have only seen too many regular "walk the DOM" blogs or answers that only go one level UP with getRootnode() Pseudo code: HTML <element-x> //# shadow-root <element-y> <element-z> //# shadow-root let container = this.closest('element-x'); </element-z> </element-y> </element-x> The standard element.closest() function does not pierce shadow boundaries; So this.closest('element-x') returns null because there is no <element-x> within <element-z> shadowDom Goal: Find

webcomponents - hide dropdown menu on window.onclick

阅读更多关于 webcomponents - hide dropdown menu on window.onclick

dropdown menu is created in shadowDOM almost perfect, but the problem is how to hide the dropdown menu when click on any where else in window class NavComponent extends HTMLElement { constructor() { super(); let template = document.currentScript.ownerDocument.querySelector('template'); let clone = document.importNode(template.content, true); let root = this.attachShadow({ mode: 'open' }); root.appendChild(clone); } connectedCallback() { let ddc = this.shadowRoot.querySelectorAll('.dropdowncontainer') let dd = this.shadowRoot.querySelectorAll('.dropdown'); let ddc_length = ddc.length for (let

Using CSS counter-reset in :host declaration of a Custom Element

阅读更多关于 Using CSS counter-reset in :host declaration of a Custom Element

问题 [run the code snippet] I want my DIV number display to start at 0 , so I want to start the counter at -1 using: counter-reset : square -1; Yet, this setting is ignored when used in :host counter-reset works fine when all DIVs are wrapped in an extra parentDIV (with counter-reset on that parent DIV) But I prefer not to use this work-around as it requires lots more code in my final application. Is it possible at all to use counter-reset in :host ??? window.customElements.define('game-toes',

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry

阅读更多关于 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry

问题 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry at http://127.0.0.1:8000/components/@polymer/polymer/lib/elements/dom-module.js:175:16 Tried deleting node-modules and package-lock and reinstalling did not work. 回答1: For those cases where it's a custom element you're registering simply check that an element by this name hasn't already been registered. Obviously you can include more complex logic to vary the name,

HTML5 ES6 Custom-Elements extending HTMLTextAreaElement crashes illegal constructor

阅读更多关于 HTML5 ES6 Custom-Elements extending HTMLTextAreaElement crashes illegal constructor

问题 i need to extend a custom element from HTMLTextAreaElement for using in a form and fetch value directly. but i allways get Illegal Constructor Message HTML: <!DOCTYPE html> <html> <head> </head> <body> <div> <working-element></working-element> </div> <div> <crashing-element></crashing-element> </div> </body> <script src="myScript.js"> </html> Typescript (compiled as ES6 to myScript.js): // all works fine class newElementWorks extends HTMLElement { constructor(){ super(); console.log(

Why do pseudoclasses on the host element have to be inside of the host function?

阅读更多关于 Why do pseudoclasses on the host element have to be inside of the host function?

问题 I do not understand why pseudo classes like :focus-within need to be within the :host() function brackets when acting on the host itself. Why can it not be :host:focus-within div ? It's even more weird that it works on :host inside of another :host() . class MyElementFail extends HTMLElement { constructor(...args) { super(...args) this.attachShadow({mode: 'open'}).innerHTML = ` <style> :host{ display: block; padding: 20px; background-color: salmon; } :host div{ background-color: white; } /

Multiple Angular Elements from different scripts

阅读更多关于 Multiple Angular Elements from different scripts

问题 Is it possible to use Angular Elements generated from diffrent scripts? I have 2 projects weather-widget and clock widget which generates their own script(concated all required ones). When I use these widgets individually it works fine but when these are used on same page it gives error shown as below: DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry at CustomElementRegistry.define (http://172.27.147.64:8080/node_modules