Hello! I’m using latest Ionic v5 and I don’t understand yet why the highlighted node (an ion-content element) has its padding css attribute ignored. As you can see in the styles inspector on the right, the padding attribute is being applied. But there’s no visual padding in the rendered DOM. Why is that?
Ah, I see, Ionic uses Web Components technology which includes shadow DOM, templates and slots. The CSS styling needs to be applied on the template instead.
If you read the documentation, each component should list out the CSS variables that are exposed for easy adjustment. Yes, Ionic 5 is completely built using Web Components!
Thanks Chris, for confirming. I didn’t find your documentation yet which talks about web components and CSS styles, I guess I need to look for it a little harder.
Here are all the APIs: https://ionicframework.com/docs/api
Each should list out the CSS that exposed.
Chris, thanks a ton, I overlooked that part. Please let me tell you that I’m satisfied with Ionic so far. I’m looking forward to learn about the premium features next week (already scheduling a call with your colleague Melissa).
Actually don’t work for Ionic, just one of their ‘champions’. I have found it as great solution for so many of my efforts.