I came with a problem in Ionic4 project:
hope that css In parents components that can overwrite css In child components or third party components.
I have tried encapsulation: ViewEncapsulation.None in component’s metadata ,but it doesn’t work at all
the Dom are still wrapped by shadow-root
Does someone else have the same problem with me?
obviously v4 using shadow-dom but u can still modify any css. and v4 also using variable. so carefully catch that variable and modify that.
You need to use CSS4 variables. I know Josh Morony has blogged about this, and I’m sure if you Google search CSS4 you’ll find a lot of ideas.
Thank you for your replying.
Did you mean the blog https://www.joshmorony.com/a-primer-on-css-4-variables-for-ionic-4/
I have read it just now, and learn a lot .but I still couldn’t solve it.
I use a ionic component in my tutor page.
In my scss file:
can you tell me what the right way is?
Can’t you just solve that by passing pagination parameters to Swiper through the options attribute? Swiper allows you to change at least a couple dozen parameters that way.
I haven’t read this thread in detail, but noticed from the image you posted that your CSS selector isn’t set up properly. You are trying to target a class that is inside of a Shadow DOM which won’t work, you need to override the variables with a selector outside of the Shadow DOM. For your example, that might look more like this:
ion-slides {
--ion-item-background-color: #1f1e1e
}
You can’t target elements more specific than the host element of the web component, since they are inside a Shadow DOM (at least in the case of ion-slides). If you wanted to add some extra padding to some child element inside of the Shadow DOM, the only way to do that would be to modify a specific CSS variable that could be provided at the ion-slides level.
I have another article that goes into more depth: https://www.joshmorony.com/anatomy-of-an-ionic-4-project/
Hi Josh!
I believe more and more user will encounter this type of problem as the popularity of ionic 4 grows.
Currently, I have found no way to change a pre-configured CSS attribute in a nested element in the Shadow DOM that is set without a CSS variable.
Let me paste an example:
Here I have the web component ion-item, which contains a number of sub-level classes (item-native, item-inner, input-wrapper). In my case I need to change a specific attribute, say “display: flex” in the input-wrapper class. As there is no CSS variable to change, and the attribute is set specifically in the web component for this class (i.e. I cannot style the parent, and expect it to cascade all the way down), I cannot find a way to change it from the outside.
I’ve already encountered two issues with my ionic 3 compatible css that I can’t fix now, because I’m using ionic standard web components. I really hope there is a better way than to write my own web component with the styling I need.
Do you know of any solution/workaround to this precarious problem?
Thanks in advance!
I actually really like and welcome the loss of the ability to interfere in such framework component internals. It means that:
Same here.
The beauty of v3 projects was that you had full control over SCSS/CSS generated - allowing you to fully tweak (if needed) any (sub)element at any level to allow for custom non-ootb looking apps.
I’m still new to v4 and am hoping that I simply missed to see the proper implementation approach of fully custom css…
However, if this limitation holds true, that right there is a show stopper for v4 projects.
Addendum:
Here is a good write up on the limitations of ShadowDom / WebComponents. Here is another good ref.
I can see the advantages, provided that the web component offers enough css variables to comprehensively style the component AND provided that the component is in perfect shape (pun intended).
The unfortunate reality is (v3), that I needed to tweak pretty much every ionic object in the one or other way for pixel perfect screen representation, or to add/remove certain characteristics (line-height, border, before::, after:: etc) to get what I am after.
There are workarounds of course to make this happen in v4 but none are as straight forward and flexible compared to the v3 approach.
The v4 web component approach works for ootb apps, enterprise stuff, back-office type look and feel, but any major L&F change (using ion- objects!) will become a nightmare.
Personally , I have a lot of problems with this web comonents, app design is never look like as a set of standart components, so I should create almost all default components from scratch even if I have an ion item with just one border which differers from default and cannot be overided with css var. So I should use another framework with set of components or fork each time ionic components and customize them, which taking a lot of time. As a result, the components of ionics are useless if we do something more complicated than the prototype
Also, if you need just owerwrite a few lines of css, you can use this approach https://github.com/adamlacombe/Shadow-DOM-inject-styles , but it’s a little bit uggly .
i hating this change
Can you imagine Apple saying that in order to theme your app on ios you need to create your own components?
I am also facing same issue… my requirement is to change the color and style of the ion-item lines which is part of item-inner of shadowDOM…please let me know if you find the solution to over write them
any solution for this?
Try this:
ion-item { display: webkit box; overflow: hidden; }
It works for my when I was setting an <img> style inside an <ion-img>
ion-img: { border-radius: 5%; overflow: hidden; }
Of couse yo can use it with classes
Add Div after ion-thumbnail end tag and add css property to that div.Its work for me
@rapropos and @joshmorony can’t we use
!important flag in scss like we used in v3 or vice versa?