Inject custom CSS into shadowDOM

[blackfalcon]

Problem

Users are encountering difficulties in customizing existing auro components due to the inability to modify tier 3 design tokens.

Proposed solution

To tackle this challenge pragmatically, consider the following approach:

const myInput = document.querySelector('auro-input');
const shadowRoot = myInput.shadowRoot;

// Create a new CSSStyleSheet
const customStyles = new CSSStyleSheet();
customStyles.replaceSync(`
  input {
    --input-margin: 1rem; /* Update input-margin token */
  }
`);

// Apply the custom styles to the shadow DOM
shadowRoot.adoptedStyleSheets = [customStyles];

This approach empowers consumers of auro components to customize tier 3 design tokens, like input-margin, within the shadow DOM, providing enhanced styling flexibility. Please be aware that this code is a proposed solution and necessitates comprehensive testing to ensure functionality.

Next steps

As we advance with updates to Auro components, rigorous testing of this solution will be imperative. Upon validation, it will be essential to create a detailed landing page on the Auro documentation site, offering developers comprehensive guidance on applying customizations.

Furthermore, a disclaimer must be included, clearly stating that teams customizing the standard component using this method will be responsible for managing updates when breaking changes occur.