Throw Elementor styles in @layer or :where()

[clevermissfox]

Prerequisites

• I have searched for similar feature requests in both open and closed discussions and cannot find an existing request.
• I have verified that the feature is still missing from the latest stable versions of Elementor or Elementor Pro.

What problem is your feature request going to solve? Please describe..

Even after parsing through the myriad of Elementor wrappers , finding the selector I need and creating the custom code, it’s such a headache to override Elementor styles when their selectors can have (0,6,2) specificity.

The only way around it currently is to use the selector keyword inside the editor but then all the users css styles are buried in various widget specific css drawers when we would prefer to use the Custom Code feature or the Custom CSS drawer under Appearance -> Customizer to keep things organized.

Describe the solution you'd like.

This could easily be remedied by having any styles not written by the user put inside an @layer elementor-styles . You can also mesh layers within other layers for organization. You wouldn’t even need to wrap every stylesheet in a @layer, just @import “widgets.css” layer(widgets). That way even my element selector would beat out elementors ID selector (as long as there is no !important;` declaration inside elementor styles. But !important; wouldn’t be necessary anymore).

@layer is very well supported even for being so new and this would solve a huge pain point for users. It would not take much refactoring either to do a basic wrap/import of all elementor styles/stylesheets to start.

Describe alternatives you've considered.

Could also be solved by using :where() on all elementor selectors. This would require wayy more overhaul and refactoring although with current ai tools and vs code multiple cursors, it wouldn’t be all that intensive .

Additional context

CSS Cascade Layers are 95.38% support , :where() is at 94.91%. In contrast, properties like flex-wrap and flex-basis are currently at 96.8% and Elementor released Flexbox Containers as stable in August 2023; grid-column and grid-row currently 96.09%. (edit: 3 weeks after this post cascade layers are at 95.59% and :where() is at 95.44%)

Agreement

• I agree that my request may be closed without action if it doesn't meet all the requirements.

[dubbo-g]

I would LOVE to see this feature implemented.. Would really improve the QoL! ... +1