Changing the color of the down icon in Ionic V4 select

document.querySelector('#my-select').shadowRoot.querySelector('.select-icon-inner').setAttribute('style', 'opacity:1');


ionViewDidEnter() {
    document.querySelector('#my-select').shadowRoot.querySelector('.select-icon-inner').setAttribute('style', 'opacity:1');
  }

To customize the default shadowRoot style, you must invoke a JavaScript function after the page has fully loaded.

Expanding upon the previous responses.

External styles always take precedence over styles specified in the Shadow DOM, especially when you introduce a global style rule that targets the specific component being styled. For more information, refer to: https://developers.google.com/web/fundamentals/web-components/shadowdom#stylefromoutside

The behavior may vary depending on whether the elements within the shadow DOM are associated with a styleSheet, or if they utilize an adopted style-sheet through adoptedStyleSheets.

If the element is nestled within the shadow DOM, it's possible to append or insert a rule into the existing style-sheet by using methods like addRule or insertRule. This approach also applies to style-sheets added via adopedStyleSheets.

As highlighted in the earlier explanation, another way to modify styles is by appending a new style-sheet to the roster of adopted style-sheets. This method remains effective even when the shadowRoot contains an embedded styleSheet, given that adoptedStyleSheets holds precedence and the styleSheetList property is immutable.

assert(myElement.shadowRoot.styleSheets.length != 0);
myElement.shadowRoot.styleSheets[0].addRule(':host', 'display: none;');

assert(myElement.shadowRoot.adoptedStyleSheets.length != 0);
`myElement.shadowRoot.adoptedStyleSheets[0].addRule(':host', 'display: none;');`

const sheet = new CSSStyleSheet();
sheet.replaceSync(`:host { display: none; }`);

const elemStyleSheets = myElement.shadowRoot.adoptedStyleSheets;

// Add your style to the current style sheet.
myElement.shadowRoot.adoptedStyleSheets = [...elemStyleSheets, sheet];

// Alternatively, overwrite a style set in the embedded `styleSheet`
myElement.shadowRoot.adoptedStyleSheets = [sheet];

An effective solution for styling nested elements within shadowRoots.

Consider the following scenario:

<div class="container">
  #shadowRoot
    <div class="inner-component">
      #shadowRoot
        <div class="target-element">some</div> <!-- will be styled in red -->
    </div>
</div>

How to use this solution:

const topLevelComponentSelector = '.container';
const innerComponentSelector = '.inner-component';
const cssToAdd = '.inner-component > * { color: red }';

adjustShadowRootStyles([topLevelComponentSelector, innerComponentSelector], cssToAdd);

The implementation in Typescript:

//main function
function adjustShadowRootStyles(hostsSelectorList: ReadonlyArray<string>, styles: string): void {
  const sheet = new CSSStyleSheet();
  sheet.replaceSync(styles);

  const shadowRoot = queryShadowRootDeep(hostsSelectorList);
  shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, sheet];
}

// A helper function
function queryShadowRootDeep(hostsSelectorList: ReadonlyArray<string>): ShadowRoot | never {
  let element: ShadowRoot | null | undefined = undefined;

  hostsSelectorList.forEach((selector: string) => {
    const root = element ?? document;
    element = root.querySelector(selector)?.shadowRoot;
    if (!element) throw new Error(`Cannot find a shadowRoot element with selector "${selector}". The selectors chain is: ${hostsSelectorList.join(', ')}`);
  });

  if (!element) throw new Error(`Cannot find a shadowRoot of this chain: ${hostsSelectorList.join(', ')}`);
  return element;
}

P.S. Note that web components like these may load asynchronously, so remember to call adjustShadowRootStyles() after they have fully loaded.

You can also use a quick workaround by wrapping it with setTimeout, for example:

setTimeout(() => adjustShadowRootStyles(...), 60)

. It's not ideal, but it does the trick.

It's important to note that any suggestions involving new CSSStyleSheet() should be approached cautiously, especially considering that as of now (nearly 2023, happy new year everyone!), Safari still does not support the stylesheet constructor. This means that code utilizing this method will not function on iOS devices due to the reliance on Apple's Webkit engine across all browsers on those devices (even if it appears to be "Chrome"). While injecting styles into a shadowRoot using this approach is technically correct, it ultimately fails on iOS devices, which doesn't meet my standards unfortunately...

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet

After reading a comment from @Renato, I feel compelled to echo their sentiment on solving the issue of customizing a WebComponent within the hosting application.

@Supersharp is correct in noting that external CSS rules do not automatically apply to the Shadow Root, as it is intentionally designed this way.

CSS variables are suggested as a solution, but in my experience, they may be too complex for a singular use case and require upfront support from the WebComponent.

Implementing properties via :host inheritance, as mentioned by @Renato, aligns well with API design principles:

• The CSS rules of the custom element (:host) can be overridden by outer rules
• The inner content of the Shadow DOM, or :host's children, may inherit CSS rules from the :host, whether by default or explicit rule

Prioritizing this approach before resorting to CSS stylesheet injection may prove beneficial, especially considering its compatibility beyond just 'open' mode.

However, there are limitations to this method:

• Inner elements may not always inherit relevant rules from the :host
• In cases where a WebComponent's structure is overly complex, relying solely on a single :host may not suffice

From personal experience, simpler components with easily customizable CSS rules can greatly benefit from the unobtrusive nature of propagating rules through :host.

When working with web components, it is common to want to replicate all ancestor stylesheets in your target component:

const cloneStyleSheets = element => {
  const sheets = [...(element.styleSheets || [])]
  const styleSheets = sheets.map(styleSheet => {
    try { 
      const rulesText = [...styleSheet.cssRules].map(rule => rule.cssText).join("")
      let res = new CSSStyleSheet()
      res.replaceSync(rulesText)
      return res
    } catch (e) {
    }
  }).filter(Boolean)
  if (element===document) return styleSheets
  if (!element.parentElement) return cloneStyleSheets(document).concat(styleSheets)
  return cloneStyleSheets(element.parentElement).concat(styleSheets)
}

To implement this in your component:

constructor () {
  super() 
  this.attachShadow({mode: 'open'})
  this.shadowRoot.adoptedStyleSheets = cloneStyleSheets(this)

If you find yourself needing to include multiple lines of CSS in a web component, especially if it is nested within another component, one efficient approach is to extract the CSS rules from an already imported stylesheet. In your HTML, import the CSS like this:

<!-- For example, in index.html -->
<link rel="stylesheet" id="styles-file-for-custom-element" href="./styles.css">

Then, use JavaScript to apply these CSS rules to the web component:

// Simplified JS code snippet
window.addEventListener('load', addCSSFromSheet);

function addCSSFromSheet(params) {
    // Select the custom element, possibly nested.
    const nestedCustomElement = document.querySelector('top-level-custom-element').shadowRoot.querySelector('nested-custom-element');

    // Retrieve styles from the imported stylesheet and convert them into text.
    const rules = document.getElementById('styles-file-for-custom-element').sheet.cssRules;
    let rulesCSSText = '';

    // Convert rules into text representation.
    for (let index = 0; index < rules.length; index++) {
        rulesCSSText += `${rules[index].cssText} `;
    }

    // Create a new stylesheet, apply rules, then add it to the web component
    var sheet = new CSSStyleSheet();
    sheet.replaceSync(rulesCSSText);
    apiRequest.shadowRoot.adoptedStyleSheets.push(sheet);
}

According to @supersharp's answer on Stack Overflow, this method is suitable for web components that have the shadow DOM set to open mode.

By importing an external CSS file into the shadow root, I was able to achieve this task.

let container = document.querySelector('body');
let shadowRoot = container.attachShadow({ mode: "open" });

let styleSheet = document.createElement('link');
styleSheet.rel = 'stylesheet';
styleSheet.type = 'text/css';
styleSheet.href = '/css/custom.css';
shadowRoot.appendChild(styleSheet);

This method has been tested and successfully works on Firefox 123, Safari 17, and Chrome 121.

To implement in Angular, utilize JavaScript path or query to locate the element using document.querySelector. Apply the specified style below and ensure it is retained in ngAfterViewInit:

ngAfterViewInit(): void {
   document.querySelector('#my-select').shadowRoot.querySelector('.select-icon-inner').setAttribute('style', 'opacity:1');
}