0

I have stumbled upon some difficulties styling ion-datetime component using ionic 6, and none of the posts seem to contain a solution for this. I would like to apply some custom styles to picker items that appear in the shadow-root part.

Applying CSS to classes like .picker-item and .picker-item-active doesn't do anything because they are in the shadow-root. And there don't seem to be any styling properties and variables for ion-picker that I could use.

I am using the standard ion-datetime component like this:

<ion-datetime presentation="time"></ion-datetime>

and in the simulator while inspecting the HTML it appears as:

Chrome inspect example

Styling that I would like to change:

  • Color and font properties for picker items
  • Color, background and font properties for active picker item
ossmalpha
  • 881
  • 6
  • 10
  • Notice how it says "shadow-root"? `::ng-deep .picker-time` https://www.google.com/search?q=how+to+style+shadow+dom&oq=how+to+style+shadow+dom –  Feb 07 '23 at 12:36
  • That would have been a good solution. Unfortunately, I was still not able to apply any styles to the underlying objects under shadow-root. – ossmalpha Feb 08 '23 at 09:06

2 Answers2

1

Since they are all open shadowRoots, you can get in and inject a <style> sheet:

document.querySelector("ion-datetime")
.shadowRoot.querySelector("ion-picker-internal")
.shadowRoot.querySelector("ion-picker-column-internal")
.shadowRoot.prepend( Object.assign( document.createElement("style") , {
  innerText : `
               .picker-item {
                              background:hotpink
                            }
              `
}));
Danny '365CSI' Engelman
  • 16,526
  • 2
  • 32
  • 49
0

After some more playing around, I have been able to find a solution and customize it to my project needs. Thanks to Danny '365CSI' Engelman for inspiration.

The use of ion-datetime and its customization in my project is complex due to using multiple ion-datetime elements appearing and disappearing dynamically. Therefore, applying custom styling of it required some additional logic not posted here. Please reach out if you need some help regarding this.

Here is the base logic that allowed me to apply some styles to ion-datetime:

document.querySelectorAll("ion-datetime").forEach(dt => {
  var el = dt.shadowRoot.querySelector("ion-picker-internal");
  el.shadowRoot.prepend(Object.assign(document.createElement("style"), {
    innerText: `
      .picker-highlight {
        background: red !important;
      }
    `
  }));
  el.querySelectorAll("ion-picker-column-internal").forEach(col => {
    col.shadowRoot.prepend(Object.assign(document.createElement("style"), {
      innerText: `
        .picker-item {
          color: green !important;
        }    
        .picker-item-active {
          color: blue !important;
        }
      `
    }));
  });
});
ossmalpha
  • 881
  • 6
  • 10