A simple helper Class to save time while creating component registrations and DOM references to internal element using the Adobe's approach with `data-cmp-is="Somecomponent` and the reference with hooks `data-cmp-hook-somecomponent="nameOfElement"`.
A simple helper Class to save time while creating component registrations and DOM references to internal element using the Adobe's approach with data-cmp-is="Somecomponent and the reference with hooks data-cmp-hook-somecomponent="nameOfElement".
```
npm i @3share/ui-component
` `
`
import { Component, descriptor } from '@3share/ui-component';
@descriptor({
selector: '[data-cmp-is="Slideshow"]', // this is the selector the decorator will use to instantiate this class.
})
class Slideshow extends Component {
...
constructor(cmpRef: HTMLElement) {
super(cmpRef);
/ Logs the DOM reference to the component itself. /
console.log(this.$cmp);
/*
Logs and object with all the hooks found on this component.
{ slides: HTMLElement[], clickButton: HTMLElement[], }
*/
console.log(this.$elements);
this.$elements?.slides.forEach((slide) => {
slide.addEventListener('mouseenter', this.someEventHandler);
});
this.$elements?.button[0].addEventListener('mouseenter', this.someClickHandler);
}
private someEventHandler(event: MouseEvent):void {}
private this.someClickHandler(event: MouseEvent):void {}
}
export default Slideshow;
``