Hey there thanks for reading and taking the time to comment!
No shadow dom needed! You can create any element you want.
However I recommend using standard elements. The reason is, custom elements will not pass validators (at least I do not know of a way). This is not Vibe's fault though:).
Also instead of using the shadow dom to prevent things like css bleed, each component can set it's own CSS with something like:
myRef.$css('position: absolute; display: inline-block;') etc.
You can even use string templates to pass in variables:
And of course you could create style tags as components with rules to style components that match data-attributes that you define. But the $css method is just easier in my opinon.
It's also not a derivative of Vuejs. It is its own thing. There are no vue-if type of attributes for the elements or anything like that.
You are right, it is small but it I think it gives you the freedom to do what you want especially if you just want to drop in Vanilla JS to your components!
Heck ,you don't even have to create components at all if you don't want since you can "vibe" any element:)
I hope you give it a try. If you do, let me know how it goes!
Hey there thanks for reading and taking the time to comment!
No shadow dom needed! You can create any element you want.
However I recommend using standard elements. The reason is, custom elements will not pass validators (at least I do not know of a way). This is not Vibe's fault though:).
Also instead of using the shadow dom to prevent things like css bleed, each component can set it's own CSS with something like:
myRef.$css('position: absolute; display: inline-block;') etc.
You can even use string templates to pass in variables:
myRef.$css(
height: ${num}px; display: inline-block;
).And of course you could create style tags as components with rules to style components that match data-attributes that you define. But the $css method is just easier in my opinon.
It's also not a derivative of Vuejs. It is its own thing. There are no vue-if type of attributes for the elements or anything like that.
You are right, it is small but it I think it gives you the freedom to do what you want especially if you just want to drop in Vanilla JS to your components!
Heck ,you don't even have to create components at all if you don't want since you can "vibe" any element:)
I hope you give it a try. If you do, let me know how it goes!
String template for CSS is good. I'll try it.
Awesome!
You could even store your complete CSS in something like:
const cssvar =
color: blue; display: block; width: 50px;
;Which can span multiple lines if you want (because of the backticks).
then do:
myRef.$css(
${cssvar}
)Be sure to put backticks around the grey areas above.. for some reason Dev.to is removing them from my reply.
Don't worry I know that. Plus, that is markdown.