https://github.com/adamlacombe/shadow-dom-inject-styles
:tada: A helper function to easily modify Shadow DOM CSS.
https://github.com/adamlacombe/shadow-dom-inject-styles
css ionic4 shadow-dom stenciljs web-components
Last synced: about 1 month ago
JSON representation
:tada: A helper function to easily modify Shadow DOM CSS.
- Host: GitHub
- URL: https://github.com/adamlacombe/shadow-dom-inject-styles
- Owner: adamlacombe
- License: mit
- Archived: true
- Created: 2018-08-06T00:02:16.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2020-06-11T15:19:08.000Z (over 5 years ago)
- Last Synced: 2025-02-25T02:46:14.407Z (7 months ago)
- Topics: css, ionic4, shadow-dom, stenciljs, web-components
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/shadow-dom-inject-styles
- Size: 11.7 KB
- Stars: 46
- Watchers: 4
- Forks: 8
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Shadow-DOM-inject-styles
A helper function to easily modify Shadow DOM CSS.
## Install
```bash
npm install shadow-dom-inject-styles --save
```
## Vanilla JS Example / Demo
[jsfiddle](https://jsfiddle.net/ry4sbnom/1/)
```html
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);
```
## Typescript Example
```ts
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);
```