Social Media Photo by Dawid Zawiła on Unsplash
µhtml based Custom Elements.
Check out the test page or this code pen playground.
import{define}from'uce';define('my-component',{// if specified, it can extend built-ins too.// by default it's 'element', as HTMLElementextends: 'div',// if specified, it's like the constructor// it's granted to be invoked *only once* on bootstrap// and *always* before connected/attributeChangedinit(){// µhtml is provided automatically via this.html// it will populate the shadow root, even if closed// or simply the node, if no attachShadow is definedthis.html`<h1>Hello 👋 µce</h1>`;},// if specified, it renders within its Shadow DOM// compatible with both open and closed modesattachShadow: {mode: 'closed'},// if specified, observe the list of attributesobservedAttributes: ['test'],// if specified, will be notified per each// observed attribute changeattributeChanged(name,oldValue,newValue){},// if specified, will be invoked when the node// is either appended live, or removedconnected(){},disconnected(){},// events are automatically attached, as long// as they start with the `on` prefix// the context is *always* the component,// you'll never need to bind a method hereonClick(event){console.log(this);// always the current Custom Element},// if specified with `on` prefix and `Options` suffix,// allows adding the listener with a proper third argumentonClickOptions: {once: true},// or true, or default false// any other method, property, or getter/setter will be// properly configured in the defined class prototypegettest(){returnMath.random();},settest(value){console.log(value);},sharedData: [1,2,3],method(){returnthis.test;}});Private properties can be created via a WeakMap, which is indeed how Babel transforms these anyway.
constprivates=newWeakMap;define('ce-with-privates',{init(){// define these onceprivates.set(this,{test: 1,other: '2'});},method(){// and use it anywhere you need themconst{test, other}=privates.get(this);console.log(test,other);}});Object literals have been used as mixin for a very long time, and the pattern in here would likely be very similar.
The only warning is that Object.assign, as well as object {...spread}, lose getters and setters in the process, so that if you want to extend more complex components, you should consider using assignProperties, or a similar helper.
import$from'assign-properties';constmixin=(...components)=>$({}, ...components);// a component literal definitionconstNamedElement={getname(){returnthis.tagName;}};// a generic NamedElement mixinconstFirstComponent=mixin(NamedElement,{method(){console.log(this.name);}});// define it via the FirstComponent mixindefine('first-component',FirstComponent);// define it via mixindefine('first-component',mixin(FirstComponent,{otherThing(){}}));