custom-element | 易学教程

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. 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, decorate the class, etc, however this simply checks to see if something is already registered using the

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('newElementWorks'); } } customElements.define('working-element', newElementWorks); // this one crashes on super(

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', class extends HTMLElement { constructor() { super(); this.attachShadow({mode: 'open'}) .appendChild

How to style :root without !important using proper specificity

阅读更多关于 How to style :root without !important using proper specificity

Inside a Custom Element because border-color is set on the parent page, I can not make border-color work without resorting to !important :host([player="O"]) { color: var(--color2); border-color: var(--color2) !important; } The selector works fine, the color is set, so it is a Specificity issue Question: Is it possible without !important ? Working snipppet: window.customElements.define('game-toes', class extends HTMLElement { constructor() { super(); let shadowRoot = this.attachShadow({ mode: 'open' }); shadowRoot.innerHTML = 'Toes'; shadowRoot.appendChild(document.querySelector('#Styles')

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/document-register-element/build/document-register-element.js:2:18538) at new AppModule (http://172.27

How to communicate between Web Components (native UI)?

阅读更多关于 How to communicate between Web Components (native UI)?

I'm trying to use native web components for one of my UI project and for this project, I'm not using any frameworks or libraries like Polymer etc. I would like to know is there any best way or other way to communicate between two web components like we do in angularjs/angular (like the message bus concept). Currently in UI web-components, I'm using dispatchevent for publishing data and for receiving data, I'm using addeventlistener . For example, there are 2 web-components, ChatForm and ChatHistory. // chatform webcomponent on submit text, publish chattext data this.dispatchEvent(new

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

阅读更多关于 How to stamp out template in self contained custom elements with vanilla js?

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 sticking it in an owner document. var tmpl = ` <template id="tmpl"> <h1 class="tarot-title"><slot name=

Why custom elements not support attributes as an object?

阅读更多关于 Why custom elements not support attributes as an object?

I am trying to pass data attribute in custom element as an object but while receiving inside attachedCallback method getting value "[object object]" in a string form. So can anyone help me to figure out what is the work around to get the attributes as an object inside custom-element(web component). code sample <script> class myElements extends HTMLElement { createdCallback() { this.innerHTML = `<h1>Hello</h1>`; } attachedCallback() { console.log(this.getAttribute('data')); } } document.registerElement('my-element', myElements); </script> custom element tag <script> var object = { key1: 111,

Why custom elements not support attributes as an object?

阅读更多关于 Why custom elements not support attributes as an object?

问题 I am trying to pass data attribute in custom element as an object but while receiving inside attachedCallback method getting value "[object object]" in a string form. So can anyone help me to figure out what is the work around to get the attributes as an object inside custom-element(web component). code sample <script> class myElements extends HTMLElement { createdCallback() { this.innerHTML = `<h1>Hello</h1>`; } attachedCallback() { console.log(this.getAttribute('data')); } } document

Creating a custom table row

阅读更多关于 Creating a custom table row

问题 I am trying to create a custom table row but having difficulty getting it to behave properly. I've tried the two below methods and they give bizarre results. I realize that this is very easy to to without custom elements but this is a small example of a much larger project. What can I change to achieve the desired result? class customTableRow extends HTMLElement { constructor(){ super(); var shadow = this.attachShadow({mode: 'open'}); this.tableRow = document.createElement('tr'); var td =