custom-element

I'm nesting custom elements. I'd like to have my parent custom element use methods and properties from its child custom element's prototype. E.g. <script> var ChildElement = Object.create(HTMLElement.prototype); ChildElement.getName = function () { return "Bob"; } document.registerElement("child-element", { prototype: ChildElement }); var ParentElement = Object.create(HTMLElement.prototype); ParentElement.createdCallback = function () { var self = this; setTimeout(function () { // This logs 'Bob', correctly console.log(self.childNodes[0].getName()); }, 0); // This explodes - getName is not

I am creating a web component using native implementation, which in it's html template has links to images. However, those links only work if they are absolute, or relative to the main document, which means, that that component is not reusable, or portable. Also, it is very counterintuitive. Currently, I add a data-url_prefix attribute to all elements that need to use images. Then, when creating a shadow root for my custom element, I replace a {{URL_PREFIX}} with the value of that argument. My solution seems very bad. I would be very glad if you advised something better, thanks. I found an

I've been using custom elements v1 for a while now via a polyfill . Chrome 54 (the first version with a native v1 implementation) started throwing errors when initializing my elements: DOMException: Failed to execute 'createElement' on 'Document': The result must not have children The offending line is a simple: let el = document.createElement('my-custom-element'); Chrome's native implementation appears to be enforcing specification requirements that the polyfill was not. According to the " Requirements for custom element constructors " section of the spec: The element must not gain any

I have a special case where I need to encapsulate a React Component with a Web Component. The setup seems very straight forward. Here is the React Code: // React Component class Box extends React.Component { handleClick() { alert("Click Works"); } render() { return ( <div style={{background:'red', margin: 10, width: 200, cursor: 'pointer'}} onClick={e => this.handleClick(e)}> {this.props.label} <br /> CLICK ME </div> ); } }; // Render React directly ReactDOM.render( <Box label="React Direct" />, document.getElementById('mountReact') ); HTML: <div id="mountReact"></div> This mounts fine and the

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('text'); // the getAttribute call returns null img.src = this.getAttribute('src'); // as does this one

I am trying to create a web component that is usable in a form element specifically, that has a name , and a value . I recognize that I can create a web component that extends an HTMLInputElement : <input is="very-extended"> but I am trying to create an entirely new element. When creating a regular web component, you can create it from the prototype of a regular HTMLElement ( HTMLElement.prototype ). Which leads me to assume that I can create a different element with the prototype of an HTMLInputElement ( HTMLInputElement.prototype ). You actually use that prototype when extending the API of

I'm new to webcomponents. Since v1 of webcomponents is available, I'm starting there. I have read various posts around the web about them. I'm particularly interested in composing them correctly. I have read about slots and have them working, although my efforts have not resulted in slotted webcomponents that work the way I expected. If I have compose nested web components like this, the DOM from the nested/slotted webcomponent does not get inserted in the slot of the parent: <parent-component> <child-component slot="child"></child-component> </parent-component> And here's the parent