Styling a Shadow DOM in Ionic

  Рет қаралды 26,042

Joshua Morony

Joshua Morony

Күн бұрын

Пікірлер: 63
@novacodellc3484
@novacodellc3484 6 жыл бұрын
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
@KillerB313 4 жыл бұрын
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
@Mhidy 5 жыл бұрын
Good explanation. Something to remember: 13:45 - 13:58
@miklosnemeth8566
@miklosnemeth8566 3 жыл бұрын
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
@joshuadurai5239 3 жыл бұрын
The video is really helpful. But the main chunk of information is at the very end, precisely 11:57 :)
@mdgbdiggio
@mdgbdiggio 3 жыл бұрын
THANK YOU SOOO MUCH! Your videos are saving me a ton of time!
@seapickle940
@seapickle940 5 жыл бұрын
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
@lucasfarias1148 4 жыл бұрын
Thank you so much, you saved me from wasting an entire day trying to change shadow DOM properties.
@mikelexp
@mikelexp 6 жыл бұрын
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
@JoshuaMorony 6 жыл бұрын
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
@arulyanasokan1658 4 жыл бұрын
Very helpful!
@johnaspinall8773
@johnaspinall8773 3 жыл бұрын
Thanks for the explainer, was tearing my hair out with this Shadow DOM nonsense!
@Miionu
@Miionu 3 жыл бұрын
Still today with all the documentation, your video helped me so much! This shadow part and CSS variables are super difficult with Ionic 😅
@RodrigoGraca31
@RodrigoGraca31 5 жыл бұрын
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
@shafi2344 6 жыл бұрын
Glad to see u in youtube❤️
@ishraq95
@ishraq95 3 жыл бұрын
simply use Vanilla JS. like this document.querySelector('.filter-container').shadowRoot.querySelector('main').style.height='88%'
@miklosnemeth8566
@miklosnemeth8566 3 жыл бұрын
This works only if their shadow DOMs are open
@peterchapman6210
@peterchapman6210 6 жыл бұрын
Excellent explanation ! Thankyou!
@nemrx
@nemrx 4 жыл бұрын
I love you Joshua
@tntg5
@tntg5 5 жыл бұрын
Can we disable Dom shadowing at all?
@mohamedeljalilmami1264
@mohamedeljalilmami1264 6 жыл бұрын
Thanks for this explanation!
@musicplayground8588
@musicplayground8588 6 жыл бұрын
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
@onurdmrts48 6 жыл бұрын
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
@kelvijns 6 жыл бұрын
Did you find out?
@kelvijns
@kelvijns 6 жыл бұрын
Had a chat with a ionic developer, you cant. You're not allowed to change the components like that. Don't like this.
@onurdmrts48
@onurdmrts48 6 жыл бұрын
@@kelvijns Yes you cant. There are some hacks for it but they are painful lol
@MisterRod
@MisterRod 5 жыл бұрын
@@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
@judgewest2000 6 жыл бұрын
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
@fardoche6 6 жыл бұрын
Thanks! Helped a lot!
@BrianTheTrader
@BrianTheTrader 5 жыл бұрын
Good. Still haven't figured out how to get ion-menu width to take when inside ion-split-pane
@ryanp56
@ryanp56 5 жыл бұрын
How would you go about modifying ion-range's .range-pin css attributes?
@pabloweinxakapaulsynth966
@pabloweinxakapaulsynth966 5 жыл бұрын
You're so really great.
@KubaSobecki
@KubaSobecki 5 жыл бұрын
THANK YOU!
@mohamosh9015
@mohamosh9015 5 жыл бұрын
Amazing from Saudi
@rajeshbabu2699
@rajeshbabu2699 6 жыл бұрын
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
@prtkpatel 4 жыл бұрын
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
@BrunoBrumm 5 жыл бұрын
how to change Ionic loader background style
@peterlindstrom3828
@peterlindstrom3828 5 жыл бұрын
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
@devendragaud831 5 жыл бұрын
how i can change the height of every element?
@massimomonacchi4211
@massimomonacchi4211 3 жыл бұрын
DUDEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE THXXXXXXXXXXXXXXXXXX
@barbellbender4232
@barbellbender4232 5 жыл бұрын
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
@chethannp5981 6 жыл бұрын
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
@flawtista 4 жыл бұрын
ion-range::slotted(div.ranger-bar){ background-color: blue !important; }
@zoecarlibur
@zoecarlibur 5 жыл бұрын
I'm trying to put a background image on the #shadowroot div :(
@graham859
@graham859 5 жыл бұрын
It's s all over again. Hate it, but thank you for the tutorial!
@TestTest-ie5yp
@TestTest-ie5yp 4 жыл бұрын
they should give an option to totally disable the shadow dom thing completely
@jagdishmh7646
@jagdishmh7646 6 жыл бұрын
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
@madhawapriyashantha3722 5 жыл бұрын
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
@vooose 5 жыл бұрын
'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
@JoshuaMorony 5 жыл бұрын
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
@miklosnemeth8566 3 жыл бұрын
Exactly in next relese they can decide to use closed shadow DOMs
@tonypolinelli
@tonypolinelli 5 жыл бұрын
what a train wreck. ditching on using ionic
@maniya10824
@maniya10824 6 жыл бұрын
Ionic 4 customize shadow DOM in tabbar height and justify-content
@Maystro_eg
@Maystro_eg 6 жыл бұрын
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
@rashmichandranchicku 5 жыл бұрын
Try - -background variable
@maximekrier2388
@maximekrier2388 6 жыл бұрын
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
@JoshuaMorony 6 жыл бұрын
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
@niranjangowdacm 5 жыл бұрын
Its really high time to ditch ionic and move towards react-native or flutter.
@tntg5
@tntg5 5 жыл бұрын
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
@niranjangowdacm 5 жыл бұрын
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
@juanbreinlinger 5 жыл бұрын
How on earth can you downvote this video... I just don't get it... I guess haters hate...
@EdwinVeroes
@EdwinVeroes 4 жыл бұрын
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/
Using Custom Components on Multiple Pages in Ionic
12:48
Joshua Morony
Рет қаралды 46 М.
How to deeply understand Angular signals (...or anything)
10:51
Joshua Morony
Рет қаралды 4,2 М.
Accompanying my daughter to practice dance is so annoying #funny #cute#comedy
00:17
Funny daughter's daily life
Рет қаралды 26 МЛН
From Small To Giant 0%🍫 VS 100%🍫 #katebrush #shorts #gummy
00:19
Мясо вегана? 🧐 @Whatthefshow
01:01
История одного вокалиста
Рет қаралды 4,4 МЛН
The Shadow DOM: A Practical Introduction for Developers
8:49
Code Radiance
Рет қаралды 11 М.
10 Tailwind Classes I Wish I Knew Earlier
13:31
Web Dev Simplified
Рет қаралды 197 М.
Ionic 4 Theme Builder with CSS Variables
12:12
Fireship
Рет қаралды 53 М.
Git bisect is insanely good (and so easy)
4:00
Joshua Morony
Рет қаралды 91 М.
Angular v19 Developer Event
22:54
Angular
Рет қаралды 63 М.
10 Tools & Services Every Ionic Developer Should Know
21:25
Simon Grimm
Рет қаралды 26 М.
Ionic 4: Should you Build a Hybrid App?
10:35
Fireship
Рет қаралды 256 М.