mirror of
https://gitee.com/shuto-github/Shadow-DOM-inject-styles.git
synced 2026-04-21 00:00:02 +08:00
update readme
This commit is contained in:
@@ -1,11 +1,45 @@
|
||||
# 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
|
||||
<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
|
||||
|
||||
```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 {
|
||||
@@ -14,4 +48,4 @@ const styles = `
|
||||
`;
|
||||
|
||||
injectStyles(toolbar, '.toolbar-background', styles);
|
||||
```
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user