Hi! Yes so the library I shared above simplifies using the web components.
It works great with Wappler with data bindings etc. It was very easy to learn as well.
I just made this steps component for example:
The JS logic for the web component is easy to set up:
class McStepsContainer extends WebComponent {
static observedAttributes = [
'step'
];
currentSteps = {
node: null,
step: 0
};
get template() {
let steps = this.steps;
return `<div class="d-flex flex-row" style="display: flex; width: 100px; margin: 0 -10px;"><slot name="step"></slot></div> `;
}
get stylesheet() {
return '<link rel="stylesheet" href="/bootstrap/5/css/bootstrap.min.css"> <link rel="stylesheet" href="/css/style.css">'
}
onMount() {
const steps = this.querySelectorAll('[slot="step"]');
steps.forEach((el, index) => {
if (this.step > index+1) {
el.color = "bg-primary";
} else if (this.step == index+1) {
el.color = "bg-light";
} else {
el.color = "bg-muted"
}
})
};
onUpdate() {
const steps = this.querySelectorAll('[slot="step"]');
steps.forEach((el, index) => {
if (this.step > index+1) {
el.color = "bg-primary";
} else if (this.step == index+1) {
el.color = "bg-light";
} else {
el.color = "bg-muted"
}
})
};
}
McStepsContainer.register();
class McStep extends WebComponent {
static observedAttributes = [
'title',
'color'
];
step = 0;
get template() {
let steps = this.steps;
return `<div class="d-flex flex-column align-items-center" style="margin: 0 10px;">
<div class="rounded d-flex mb-2 form_step_dot {color}"></div>
<p class="mb-0 small">{title}</p>
</div>`;
}
get stylesheet() {
return `
<style>
</style>
`;
};
get count() {
return this.steps;
}
}
McStep.register();
I can just easily bind with Wappler the “step” to a variable and all will work perfectly. Now I can use this component everywhere in my app and it will be consistent