custom-element

问题 This question already has answers here : Why do pseudoclasses on the host element have to be inside of the host function? (2 answers) Closed 5 months ago . Is it not possible, or not allowed, to combine :host and :defined in CSS, while combining the latter with the :host() pseudoclass works? As you can see in below example, the following :host:defined { display: block; } does not work, while :host(:defined) { display: block; } works. class CustomElement extends HTMLElement { constructor() {

问题 This question already has answers here : Why do pseudoclasses on the host element have to be inside of the host function? (2 answers) Closed 5 months ago . Is it not possible, or not allowed, to combine :host and :defined in CSS, while combining the latter with the :host() pseudoclass works? As you can see in below example, the following :host:defined { display: block; } does not work, while :host(:defined) { display: block; } works. class CustomElement extends HTMLElement { constructor() {

问题 Update: Went for a different solution: <img is=queen-of-hearts> Live at: https://card-ts.github.io/playingcardts this question is about working around CSS Selector limitations So my Custom Elements now make true symantic HTML: Displaying: no external SVG files, all 500KB SVG is (manually) slimmed and LZMA packed to 70KB into ONE Custom Element all 52 cards (Custom Elements) are then created with Supersharps class factory code Next problem arises... What selectors to use? I can do : Queen-of

问题 I want to execute a defined class function from an Element inside my Web Component: customElements.define('first-component', class FirstComponent extends HTMLElement { constructor() { super(); } log() { console.log('Well Done!') } connectedCallback() { this.innerHTML = '<button onclick="log()">Do it</button>' } }); State right now: ReferenceError: log is not defined 回答1: With parentElement, or closest() In order to call the log() method of the custom element, you'll have to get a reference on

问题 In the Clarity Icon docs they show that you can use the shape attribute to set the icons shape like this: <clr-icon shape="info-circle" size="16"></clr-icon> In my angular template I am using a clr-icon element like this: <clr-icon [shape]="myShape"></clr-icon> And use my component to set the string value of the shape bound to myShape : export class MyComponent { public myShape = 'volume-up'; changeShape() { if(this.myShape === 'volume-up') { this.myShape = 'volume-mute'; return; } this

问题 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

问题 Per the custom element specification, The element must not gain any attributes or children, as this violates the expectations of consumers who use the createElement or createElementNS methods. Both Firefox and Chrome correctly throw an error in this situation. However, when attaching a shadow DOM, no error is present (in either browser). Firefox: NotSupportedError: Operation is not supported Chrome: Uncaught DOMException: Failed to construct 'CustomElement': The result must not have children

问题 Edit : Turns out, it helps if you import paper-listbox before using it in another element. For some reason I thought it was being imported as a dependency on another element I was importing, but no. As soon as I added the explicit import, it began working correctly. Original question follows. To start, this problem only happens when using paper-dropdown-menu (with paper-listbox inside) in a lit-element . We're using the component in almost the exact same way in multiple PolymerElement (s)

问题 I'm trying to create a polyfill of sorts using the Custom Elements API for custom elements used by an in-game browser engine to display buttons and similar. However, I can't seem to access the element's attributes (eg. src, href ...) from within the constructor. Here is an example: class KWButton extends HTMLElement { constructor() { super(); var attributes = this.attributes; var shadow = this.attachShadow({ mode: 'open' }); var img = document.createElement('img'); img.alt = this.getAttribute

问题 I try to get Angular Elements working in IE11. My custom element (simple button) is already displayed and the input binding is working as expected, but the output binding doesn't. A click on my custom element button in IE 11 results in the error: The object doesn't support this action What I have done so far: Remove polyfill for custom elements that was added with ng add @angular/elements (didn't work properly with IE) Update all Angular packages to 7.2.1 Add the following polyfillls to