-
-
Notifications
You must be signed in to change notification settings - Fork 138
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Details about targeting elements and what are the actual limitations when using selectors #514
Comments
After reading this I think the DevTools warning is misleading. The warning only refers to generated selectors and to those only. Let's take this as an example:
In development, it would generate a selector like this: Everything else is kept as is: specified classes passed as attribute, ids, etc... I would like to know that in hindsight what warning message would relay this information 🙏 Styling children in an idiomatic way has not been solved with Mint yet. What I usually do is wrap the element I want to style differently and use child selectors Ideas on how to solve it are welcome. |
I would like to see some kind of support for first-class style values that can be used like mixins or themes. Then I can style my children by passing them a style. See also #444 A hypothetical example:
|
After taking some time to check this well enough to be sure I didn't miss anything, I can definitely say this actually looks really amazing. The use of
Notice the use of Seems pretty reasonable to me. |
Mint makes it pretty clear that selectors are not reliable by showing the following message in the console, in all Caps:
I actually think it's really nice that Mint deals with minifying stuff for me, and usually the information in the learn section is sufficient to clear any doubts (https://www.mint-lang.com/guide/getting-started/styling-with-css and https://www.mint-lang.com/guide/reference/components/styling-elements for CSS, and also https://www.mint-lang.com/guide/reference/components/referencing-entities). But in some rare situations I find information that implies there's more to this issue than would appear. A good example is https://www.mint-lang.com/guide/recipes/using-third-party-css where classes are used.
One specific scenario that worries me is when I need to modify something that is inside a component, let's call this "Child component", from another component, let's call this one "Parent component", and to clarify what I mean, let's consider a parent component "Main" which creates a header and a footer, and it includes a Child Component "Searchbox" both in the header and footer, only for the footer version it would like to set the opacity for the search box to 0.7, reverting to 1 only when the search box is hovered. Or, to use something I actually wanted to do as an example, making Mint-Ui's
Ui.Native.Select
full-width (100%
,100vw
, whatever you fancy). Here's the documentation forUi.Native.Select
, just to reinforce the point that it doesn't mention any way to set its width: (https://ui.mint-lang.com/components/ui-native-select).When dealing with mint
component
s there's no simple way to target a child element, especially in more complex elements that may have multiplediv
s at each nesting level, and having to use some unreasonably long combination of>
s andnth-child
s doesn't make a lot of sense to me, but then there's no mention anywhere in the docs of any easy way to target stuff inside a child component, which brings me to the point of this issue:What would be the preferred way to deal with this kind of situation (Or is this something that has no established solution)? What are the actual limitations when using selectors? Some examples of those limitations would be:
class
es in the html are synced, what else is and isn't synced?style
blocks checked to sync the class names?Dom.getElementById
andDom.getElementBySelector
?This issue is actually a minor one, but it hurts to have no centralized, indexable source of truth about this, which is actually considered so fundamental that it deserves to be shown at the DevTools every time the browser loads the project in dev mode. The documentation about selectors is spread throughout many different sections and in very small chunks, plus it has some conflicting information (i.e., The use of classes when working with external CSS), and even worse than that, the docs mention the use of classes only superficially, without any further clarification about what actually works and doesn't work.
All things considered, at the very least I wanted to compile the references and whatever information I could think of here, as an issue, so anyone can contribute to make those things clear, and so that this may lead to, at some point in the future, improving the documentation.
The text was updated successfully, but these errors were encountered: