custom-element | 易学教程

Custom input element in native form

阅读更多关于 Custom input element in native form

With web components one of the elements that people want to create and override most is <input> . Input elements are bad because they are many things depending on their type and usually hard to customize, so it's normal that people always want to modify their looks and behavior. Two years ago more or less, when I first heard of web components, I was pretty excited and the first kind of elements that came to my mind that I wanted to create were custom input elements. Now that the spec is finished it looks like the need I had for input elements is not solved. Shadow DOM was supposed to allow me

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

Failed to construct 'HTMLElement'

阅读更多关于 Failed to construct 'HTMLElement'

问题 I run my-widget.js through babel (es2015 preset) to produce my-widget-es5.js . This causes an error with Polymer. Class constructor PolymerElement cannot be invoked without 'new' at new MyWidget (my-widget.js:##) at mw-widget.js [sm]:## file structure out | -- my-widget-es5.js js | -- my-widget.js html | -- my-widget.html my-widget.html <dom-module id="my-widget"> <template> <script src="/out/my-widget-es5.js"></script> </template> </dom-module> my-widget.js class MyWidget extends Polymer

Failed to execute 'createElement' on 'Document': The result must not have children

阅读更多关于 Failed to execute 'createElement' on 'Document': The result must not have children

问题 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'); 回答1: Chrome's native implementation appears to be enforcing specification requirements that the polyfill was not. According to the

Vanilla web-component structure

阅读更多关于 Vanilla web-component structure

I am looking into structuring vanilla web-components. I have previously used Polymer and like the fact that you can have the template, styles and JavaScript in one file for your component. I want to achieve this with 'vanilla' web components if possible but can't work out how. I've taken the code from here and added it to a file which I am using as follows: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Component test</title> <link rel="import" href="x-foo-from-template.html"> </head> <body> <x-foo-from

What is the point of the “is” syntax when extending elements in web components?

阅读更多关于 What is the point of the “is” syntax when extending elements in web components?

In web components, to register an element you simply type: var XFoo = document.registerElement('x-foo', { prototype: Object.create(HTMLElement.prototype) }); To create an element you can do one of these: <x-foo></x-foo> var xFoo = new XFoo(); document.body.appendChild(xFoo); var xFoo = document.createElement( 'x-foo') document.body.appendChild(xFoo); This is all fine and dandy. The issues start when you are talking about extending existing elements. var XFooButton = document.registerElement('x-foo-button', { prototype: Object.create(HTMLButtonElement.prototype), extends: 'button' }); Question

Use of Template with HTML Custom Elements

阅读更多关于 Use of Template with HTML Custom Elements

I just started learning about the HTML custom elements, and through reading a series of intros, tutorials, and documentation, I think I have a good handle on how it works, but I have a philosophical question on the proper way to use or not use the <template> tag. Custom elements give you the ability to encapsulate new functionality, simplifying the structure of your HTML document, and allowing you to simply insert a <my-custom-element>...</my-custom-element> tag instead of <div class="my-custom-element"><span class="part1">...</span><span class="part2">...</span></div> . The class definition

Is there any environment that implements the new custom elements specification?

阅读更多关于 Is there any environment that implements the new custom elements specification?

问题 A new version of the custom elements has been released at some point in the past (not sure when, as I haven't directly used the spec for awhile). Is there any polyfill or environment that implements the new custom elements specification? Reason I am asking is that I will be giving a talk on Friday about the web components specs and it will hardly do to give a talk without a demonstrations, but from what I can see all browsers and polyfills still implement the old spec. Looking at web archive

How to execute a script when the custom element is upgraded

阅读更多关于 How to execute a script when the custom element is upgraded

问题 I have defined a custom element and I want to execute a script only when the custom element is upgraded to its registered type. The use case is that I must call a custom method. My main html file looks like this: <project-list></project-list> <script> var project_list = document.getElementsByTagName("project-list")[0] project_list.custom_method("some_data"); </script> The custom element is registered in a HTML import like this: <script> "use strict"; var currentScript = document.

web component (vanilla, no polymer): how to load <template> content?

阅读更多关于 web component (vanilla, no polymer): how to load content?

问题 i'm new on web component. I checked some example, but i really can't figure out how to load (insert in the DOM) the content of a of a separate web component. Starting from this example , I put this code in a file named my-element.html: <template id="my-element"> <p>Yes, it works!</p> </template> <script> document.registerElement('my-element', class extends HTMLElement { constructor() { super(); let shadowRoot = this.attachShadow({mode: 'open'}); const t = document.querySelector('#my-element')