All about HTML Custom Elements
License: Creative Commons Zero v1.0 Universal
I'm a web nerd building digital services for the City of San Francisco, father of two wild and wonderful boys, avid bicyclist, and lover of strange sounds.
I just released an adapted version of the interactive react lifecycle methods diagram for custom element reactions:
https://andyogo.github.io/custom-element-reactions-diagram/
If you have time, I would appreciate your feedback very much.
May you also consider linking it.
When I make a component, how do I call methods on it? Last 2 lines don't work. Help?
<body>
<chart-el></chart-el>
<script>
class ChartElextends HTMLElement {
constructor() {
super();
return this
}
someOtherMethod() { /* ... */ }
get someValue() { /* ... */ }
set someValue(value) { /* ... */ }
}
customElements.define('chart-el', ChartEl)
let el = customElements.get('chart-el')
el.someValue
el.someOtherMethod()
I think it's time. Might be good to preserve the original with a v0 branch (and remove the v1 references?) too.
My versioning is off. document.registerElement() is referred to by W3C folks as "v0", and window.customElements is the "v1" API.
You wrote about v1:
As with the v0 API, the ElementClass can be [...] an object with a prototype that extends the base class's.
Do you know how to define shuch a custom element (without the class notation) ?
I've tried but Chrome raise an error and wants a functionas the second parameter. Exemple:
customElements.define( "object-v1", { prototype: Object.create( HTMLElement.prototype ) } )
Unfortunately the custom element polyfill provided by @webcomponents does not support extended built-in custom elements, has this known limitations and is slow.
The most bullet proof and battle tested polyfills I found are from @WebReflection. Please consider to at least mention them, if not just replacing by those:
constructor caveat.constructor caveat.I've been using HTML custom elements for over a year now, and I kinda think they're the bees' knees. What would you like to know about them, and how can I help you put them to work?
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.