Miss any of our Open RFC calls?Watch the recordings here! »

shadow-dom-inject-styles

1.0.3 • Public • Published

Shadow-DOM-inject-styles

A helper function to easily modify Shadow DOM CSS.

Install

npm install shadow-dom-inject-styles --save

Vanilla JS Example / Demo

jsfiddle

<script type="module">
  import {injectStyles} from 'https://unpkg.com/shadow-dom-inject-styles@latest/dist/index.js';
 
  setTimeout(() => {
 
    const toolbar = document.querySelector('ion-app > ion-header > ion-toolbar');
 
    // language=CSS
    const styles = `
        .toolbar-background {
            background: red !important;
        }
        .toolbar-container {
            color: #fff !important;
        }
    `;
 
    injectStyles(toolbar, '.toolbar-background', styles);
 
  }, 200);
</script> 

Typescript Example

import {injectStyles} from 'shadow-dom-inject-styles';
 
const toolbar = (this.el.querySelector('ion-header > ion-toolbar') as HTMLElement);
 
// language=CSS
const styles = `
  .toolbar-background {
    background: red !important;;
  }
`;
 
injectStyles(toolbar, '.toolbar-background', styles);

Install

npm i shadow-dom-inject-styles

DownloadsWeekly Downloads

140

Version

1.0.3

License

MIT

Unpacked Size

5.72 kB

Total Files

8

Last publish

Collaborators

  • avatar