search

lefetmeofefet / yoffee

Minimal HTML one-way binding library
MIT License
15 stars 1 forks source link

Option to include global styles #8

Closed dux closed 2 years ago

dux commented 2 years ago

I am sorry to interrupt, but this is a breaker to me.

I use Bootstrap v5 via CND, Yoffee via CDn , have some local styes, and when I write 

html(state)`<button class="btn btn-primary">...</button>`

I expect it to look like a bootstrap button. I have 0 will in adding styles to every Yoffee element on a page!

WTF if is this :) ? How to use global styles?

Global option to turn OFF shadowRoot that is by default ON is ok for me.

lefetmeofefet commented 2 years ago

The code you wrote won't create a new shadowRoot, but createYoffeeElement will. It is possible to use global styles by simply importing your global stylesheet in the element you want to be styled. Anyway I'll think about a no-shadowRoot option, maybe more people will prefer it.

lefetmeofefet commented 2 years ago

I've decided that elements shouldn't be able to affect global style, so shadowDOM per element will stay. If you don't want shadowDOM, you can write your application in one element and use functions that return html()`...` instead of elements.

hirako2000 commented 2 years ago

While I've generally opted to use html(), which works perfectly fine for my purposes, my liking for global styles hasn't faded away yet... I thought I would share that a recent CSS spec addition, ::part is now well browser adopted, it somewhat fulfils the desire to pierce through the shadow.

lefetmeofefet commented 2 years ago

::part is cool, didn't know about it! I played with it a bit and it can only "pierce" one shadowDOM layer, which is a shame. it also requires both the parent element and the child to modify their code to work with parts, which doesn't help our noble cause. The good news is that I'm down the rabbit hole and I found Constructable stylesheets which looks awesome and I'll try integrating it. hopefully it'll allow for "inheriting" the parent's styles, or maybe just inheriting specific style tags contents. We'll see!