custom-element

问题 That statement pasted in my question was copied from https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks. As a no-experience developer with Webcomponent, I am trying to understand all rule-of-thumbs and best practices recommended so far. Continuing reading it says "... use Node.isConnected to make sure". It is quite obvious what it means: check if it is still connected but it is not clear, at least for me, what I should do to

问题 https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom This got me all excited I could write my own custom webpage from scratch without polymer. Only to find out css :host for example is not working in Edge and FireFox. I can deal without html import for now until w3c figured out what they want to do with es6 modules, but each browser having their own half implemented Shadow DOM version without css is pushing my buttons. So I still need a full polymer stack to have

问题 I have searched for some time; but only find Polymer answers; or answers where EventListeners are put on DOM elements inside the shadowRoot. The effect I am trying to achieve with native Custom Elements: Only the focussed element should accept (and display) a keypress It is possible to attach a click event to the shadowRoot, it seems I am doing something wrong for the 'keyup' event. If I put the EventListener on the window all elements (of course) update with the same key info. window

问题 Consider the following test-element web component definition (vanilla JavaScript running on Google Chrome, not Polymer), that creates a simple component with width=500px . Its attachedCallback function outputs its width to the console, and then sets up an asynchronous delay to do it again: test-element.html <style> test-element { display: inline-block; width: 500px; } </style> <script> (function (window, document) { var proto = Object.create(HTMLElement.prototype); proto.attachedCallback =

问题 I would like to use an anchor-element with a hash-URL inside of a custom element that uses shadow DOM. I would expect, that the browser scrolls down to that anchor, but it does not do it (at least Chrome). Detail: I have an index.html like this: ... <a href="#destinationInsideShadowDOM">Jump</a> ... <my-custom-element></my-custom-element> ... And another html-file for the custom-element, which contains the anchor: <template id="my-custom-element"> ... <a id="destinationInsideShadowDOM"></a> .

问题 I am trying out a very simple application on angular elements on stackblitz and I am getting the following issue. Error: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function. All I am trying to do is trying to display hello world. I didn't face any issue doing this on visual code locally, however, this issue comes up on stackblitz. Not sure I have to follow some additional steps on stackblitz in order for me to run this

问题 I'm trying to extend the HTMLOptionElement , <template id="cOptionTemplate"> <content></content> </template> <select> <option is="custom-option">Test</option> </select> var cOption = document.registerElement('custom-option', { prototype: Object.create(HTMLOptionElement.prototype, { createdCallback: { value: function() { var template = document.getElementById("cOptionTemplate") var clone = document.importNode(template.content, true); this.createShadowRoot().appendChild(clone); } },

问题 Consider I want to extend the native button element, and create my own super-button element. As I know, it must follow the following pattern: var SuperButton = document.registerElement('super-button', { prototype: Object.create(HTMLButtonElement.prototype), extends: 'button' }); It looks strange to me - doesn't the prototype and extends parameters say the same thing? If I explicitly say that my super-button use the HTMLButtonElement prototype, why do I also need to specify that it extends the

问题 I'm trying to create a native web component for input element. I wanted the component to have custom validation functionality, similar to polymer's paper-input custom validator function. I'm not sure if I can pass a custom validator function as attribute to an instance of (web component) input element. Any suggestions would be appreciated. 回答1: An attribute is a string, not a function. You can pass a a function as a string and then evaluate it with the eval() function. It's not considered as

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