While we decided to handwave and not document a lot of the details about what makes this all tick intially and focus on sharing the really basic idea "what if you could write it like this, and style it like that" for feedback, there are some internals that were developed and they currently function in a way I didn't intend, and should be avoidable. Effectively, our element extends a base element where I was trying to define a mixin for generally switching when affordances should apply as CSS pseudo states (not yet availble widely available, so it uses an undocumented attribute mq-matched and provides an observer that subclasses can plug into). The trick here is what to do/how to coordinate when someone writes a media query like thing where two statements are both truthful ">500px it should be tabs" and ">700px it should be collapses". If the viewport is 701px, they are both true, but it can't be both. The answer is fairly straightforward - it should either be the first, or the last one. My initial inclination was it should be the first, but after playing with it a bit, I chose to make it the last.
The trouble is, the way I implemented it, there isn't a guaranteed order maintained and so you will create situations like this pen submitted by my friend Lajja...
bkardell
commented
2 years ago
While we decided to handwave and not document a lot of the details about what makes this all tick intially and focus on sharing the really basic idea "what if you could write it like this, and style it like that" for feedback, there are some internals that were developed and they currently function in a way I didn't intend, and should be avoidable. Effectively, our element extends a base element where I was trying to define a mixin for generally switching when affordances should apply as CSS pseudo states (not yet availble widely available, so it uses an undocumented attribute
mq-matchedand provides an observer that subclasses can plug into). The trick here is what to do/how to coordinate when someone writes a media query like thing where two statements are both truthful ">500px it should be tabs" and ">700px it should be collapses". If the viewport is 701px, they are both true, but it can't be both. The answer is fairly straightforward - it should either be the first, or the last one. My initial inclination was it should be the first, but after playing with it a bit, I chose to make it the last.The trouble is, the way I implemented it, there isn't a guaranteed order maintained and so you will create situations like this pen submitted by my friend Lajja...
https://codepen.io/lshah/pen/RwZjXNe
The comments in the HTML of the codepen describe how to replicate and what happens.
It seems easily avoidable if we just maintain a cannonical matching of ordering here..