Styling a Shadow DOM in Ionic

[@novacodellc3484]

DUUUUUUUUDE you just saved me from hours of beating my head against a stone. I've been trying to change the size of these radio buttons for a hot minute, and this 15 min explanation fixed 90% of my styling problems in the snap of a finger. Love your blog man, keep up the good work.

[@KillerB313]

You are lifesaver for these videos! I always wondered why the team at Ionic has been consistently slow (if at all ever) in updating their documentation. You even mention it here a bit. Sometimes the hardest part of working with this framework is the fact that it is very slimly documented, if ever at all. Again, thank you for all of your hard work over the years clarifying what should already be clear to begin with.

[@Mhidy]

Good explanation. Something to remember: 13:45 - 13:58

[@miklosnemeth8566]

This is an old video still totally relevant today when web components are getting place in more and more projects. It was a brave move from Ionic to move away IONIC 3 from a proprietary component model over to a future proof technology IONIC Web Components a.k.a IONIC 4. Google is full gear behind web components, Microsoft alike. A number of the commenters had no clue what was web component technology. This was really a great explanation even for an experienced and active web component user, too. SalesFore, Microsoft, SAP, Adobe all are building out their toolsets and component libraries. Apart from IONIC, SAP UI5 Web Components, Vaadin Fusion, Smart HTML Elements, Stencil all are excellent libraries. We are working with Lit HTML and Lit Element along with Adobe's Lit-MobX and I can say, no need for the monolithic proprietary frameworks any more.

[@joshuadurai5239]

The video is really helpful. But the main chunk of information is at the very end, precisely 11:57 :)

[@mdgbdiggio]

THANK YOU SOOO MUCH! Your videos are saving me a ton of time!

[@seapickle940]

Very good 15 minute explanation but if you're looking for the fix it's at 12:15. The first 12 minutes simply repeat over and over about shadow DOM

[@lucasfarias1148]

Thank you so much, you saved me from wasting an entire day trying to change shadow DOM properties.

[@mikelexp]

Very helpful video Josh! I understand the advantages of this new approach, but I usually change A LOT of Ionic's default styles so to be honest it looks like it's going to be a pain... But I'll start experimenting with it once it goes stable and they have the full documentation ready and we'll see. BTW I missed your videos a lot, thanks for being back!

[@JoshuaMorony]

I think the benefit to this is also that it will make it easier to modify the styles that you are *allowed* to change, but the downside is that you won't be able to change the styles that Ionic doesn't want people to mess with (which decreases flexibility, but it's also probably a good thing generally speaking). And thanks, I'm glad to be back on KZbin too!

[@arulyanasokan1658]

Very helpful!

[@johnaspinall8773]

Thanks for the explainer, was tearing my hair out with this Shadow DOM nonsense!

[@Miionu]

Still today with all the documentation, your video helped me so much! This shadow part and CSS variables are super difficult with Ionic 😅

[@RodrigoGraca31]

How do we disable shadow dom? this is so stupid! my app was working perfectly in v3 and not every single style is destroyed.....

[@shafi2344]

Glad to see u in youtube❤️

[@ishraq95]

simply use Vanilla JS. like this document.querySelector('.filter-container').shadowRoot.querySelector('main').style.height='88%'

[@miklosnemeth8566]

This works only if their shadow DOMs are open

[@peterchapman6210]

Excellent explanation ! Thankyou!

[@nemrx]

I love you Joshua

[@tntg5]

Can we disable Dom shadowing at all?

[@mohamedeljalilmami1264]

Thanks for this explanation!

[@musicplayground8588]

Hello Joshua, thanks for great video. I have few questions for you: 1| Is placing html tags in ionic ( i want to style them like we do on web) is bad? 2| Is placing inline style is bad? 3| How should we create custom elements ?

[@onurdmrts48]

What if i want to change a css property of an element in shadow dom and it doesnt have a variable for that property?

[@kelvijns]

Did you find out?

[@kelvijns]

Had a chat with a ionic developer, you cant. You're not allowed to change the components like that. Don't like this.

[@onurdmrts48]

@@kelvijns Yes you cant. There are some hacks for it but they are painful lol

[@MisterRod]

@@onurdmrts48 what would be those hacks? I'm having a hard time customizing the toast component and I don't think is worth it to make a custom component with the same exact functionality just for styling purposes.

[@judgewest2000]

Many thanks Josh. One thing I was hoping Ionic would have fixed in Ionic4 was the sticky scrolling issue with PWA iOS. Do you know anything about that? Actually if they get rid of ion-scroll that might very well do it. :)

[@fardoche6]

Thanks! Helped a lot!

[@BrianTheTrader]

Good. Still haven't figured out how to get ion-menu width to take when inside ion-split-pane

[@ryanp56]

How would you go about modifying ion-range's .range-pin css attributes?

[@pabloweinxakapaulsynth966]

You're so really great.

[@KubaSobecki]

THANK YOU!

[@mohamosh9015]

Amazing from Saudi

[@rajeshbabu2699]

hi Joshua , thanks for your wonderful tutorial , there is i have one doubt, if i need to change and default class padding, not able to do, for e.g.: inside ion-item, class="item-inner" i can't customise padding, pls advice, thank you..

[@prtkpatel]

What if there is no variable in css like shadow dom has not overflow=visible options. Can you Please tell me then how can i update the css. Thnaks in Advance

[@BrunoBrumm]

how to change Ionic loader background style

[@peterlindstrom3828]

I understand the idea of default stylings but really don't get why Ionic thinks they know how people want everything to look. This is nuts. For example, i want my ion-menu-button to be slightly larger (to match with larger tab icons) - but, according to this tutorial there is no way to modify its size.. ughh!!

[@devendragaud831]

how i can change the height of every element?

[@massimomonacchi4211]

DUDEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE THXXXXXXXXXXXXXXXXXX

[@barbellbender4232]

How do I change the color of text in the component if the shadow dom isen't set to a variable like --ion-color-primary, but instead set to 'initial' in a shadow dom like this: --color: initial color: var(--color) is there a way to change initial color away from black to the primary color as defined in the :root ?

[@chethannp5981]

Hi Joshua, Thank you so much for this video :)... i have a question, I want to control/hide the overflow on ion-scroll based on a condition, so I am dynamically adding a class to "ion-content" like this . now in the scss I am doing .no-scroll { ion-scroll{overflow-y: hidden !important}} this used to work in ionic 3 but this is not working ionic 4 since it is under shadow root. Can you Please help!! Thanks in advance.

[@flawtista]

ion-range::slotted(div.ranger-bar){ background-color: blue !important; }

[@zoecarlibur]

I'm trying to put a background image on the #shadowroot div :(

[@graham859]

It's s all over again. Hate it, but thank you for the tutorial!

[@TestTest-ie5yp]

they should give an option to totally disable the shadow dom thing completely

[@jagdishmh7646]

Dear Joshua Morony, Thank you for your videos, i need one help, Am developing my ionic 3, angular 4 app, which includes the functionality like , once we open the app it will throw an wel come message and later it will ask some 10 to 12 questions which will arise one by one, Once we gave answer of first question 2nd question will arise and 3rd and so on.. ( Q1 . In order to proceed, you need to agree with our terms and conditions Q2. What's your nickname? Q3. What's your age ( Which is having 4 inputs like 20-30 yrs, 30 - 50yrs, 50- 70 yrs and above) Q4. What's your gender Q5. What is your level of education? etc...) Some of the questions , will have to give answers from text input , and some of there need to select answers from dialog box, How to develop a onboarding process app using MongoDB, ionic3 and angular 4 application, Please help me to develop this. thank you in advance.

[@madhawapriyashantha3722]

it's a good concept to isolate component styles but there is no lot of control.if the style property is not already there then we can never set that value throw css .they should provide much better methods to override shadow css

[@vooose]

'If they dont expose a variable then you cannot change it' what about `document.querySelector('ion-range').shadowRoot.querySelector('range-bar-active').setAttribute('style', 'background-color:blue;')` ?

[@JoshuaMorony]

It is technically possible to inject styles inside of the Shadow DOM, and you can even find some small packages to help you do this, but it's not supported or recommended and will potentially lead to issues in the future. Personally, I would advise against it but ultimately that's up to you.

[@miklosnemeth8566]

Exactly in next relese they can decide to use closed shadow DOMs

[@tonypolinelli]

what a train wreck. ditching on using ionic

[@maniya10824]

Ionic 4 customize shadow DOM in tabbar height and justify-content

[@Maystro_eg]

Why i can't change ion-content background image ? it does not work ! Ionic 4 , my code is : ion-content { background-image: url('../../assets/img/login-wall.jpg') !important; background-repeat : none; background-position: center; background-size: contain; }

[@rashmichandranchicku]

Try - -background variable

[@maximekrier2388]

so there is no way to modify something that is not exposed by ionic ? in your example what if you want modify the height of the .range-bar-active ?

[@JoshuaMorony]

That's (mostly) correct - if you are attempting to modify something that is inside of a Shadow DOM and it can not be configured with CSS variables then you can not change it. It is technically possible to inject your own CSS into the Shadow DOM, so you can "hack" your way around this if you really want to, but it isn't recommended as it defeats the purpose in what Ionic is trying to achieve here with long term maintainability for their components (e.g. if you manually inject your own styles, then that component might break for you in future updates). These new components are kind of like a black box that can be configured with a pre-determined API (the CSS variables), this allows Ionic to update these components in the future knowing that they aren't going to break a bunch of peoples apps with custom configurations. The Ionic team seem to be very open to including more CSS variables for things that people want to customise, so if you think there should be a CSS variable to customise a particular aspect of a component you can open an issue with Ionic and they may add it.

[@niranjangowdacm]

Its really high time to ditch ionic and move towards react-native or flutter.

[@tntg5]

Honnestly, this is the worse feature ever. Making the migration a pain in the behind. It feels like Ionic team only cares about themselves when it comes to new features. What is the added benefits of Shadow Dom to us developers? => Headaches and losing countless houres to re Do previous apps developped with ionic 3

[@niranjangowdacm]

i just took a week to transfer a single page from ionic 3 to ionic 4. yet not successful. so put everything in global.scss file and of course it worked. but again its a huge mess. seriously i thinking to shift from ionic to react native which is far more better than this.

[@juanbreinlinger]

How on earth can you downvote this video... I just don't get it... I guess haters hate...

[@EdwinVeroes]

the tittle of this video is wrong, you are just changing the global css variables that ionic provides, and as you can notice you even changed the color of the other slider, you are just theming your app in execution time not modifying the shadow DOM you're not in any way manipulating the shadow DOM you are just theming your app -_-! ionicframework.com/docs/theming/colors ionicframework.com/docs/theming/basics this might help you blog.angular-university.io/angular-host-context/