custom-element

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 = function () { // Direct output. console.log("(1) test-element.width = ", this.offsetWidth); // Delayed

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.myShape = 'volume-up; } } Using a button (not shown in the template) I want to run the changeShape() to

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> ... </template> I want the browser to scroll down to that anchor when I click on the link in index.html.

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); } }, attributeChangedCallback: { value: function (attrName, oldVal, newVal){ switch(attrName){ case "attr1": console

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 button element? isn't it redundant? For me it looks like exactly the same information. From the Custom

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. 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 a good practice, for security reasons. Another solution is to pass it to the custom element as a Javascript