mirror of
https://gitee.com/shuto-github/Shadow-DOM-inject-styles.git
synced 2024-10-05 19:52:06 +08:00
update readme
This commit is contained in:
parent
95f3fcd17c
commit
ab751443b4
38
README.md
38
README.md
@ -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);
|
||||
```
|
||||
```
|
||||
|
14
package.json
14
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "shadow-dom-inject-styles",
|
||||
"version": "1.0.1",
|
||||
"version": "1.0.2",
|
||||
"description": "A helper function to easily modify shadow dom css.",
|
||||
"module": "./dist/index.js",
|
||||
"main": "./dist/index.js",
|
||||
@ -13,6 +13,18 @@
|
||||
},
|
||||
"author": "Adam LaCombe",
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
"shadow-dom",
|
||||
"css",
|
||||
"styles",
|
||||
"ionic",
|
||||
"stencil",
|
||||
"stenciljs",
|
||||
"angular",
|
||||
"vue",
|
||||
"typescript",
|
||||
"javascript"
|
||||
],
|
||||
"devDependencies": {
|
||||
"@studio/changes": "^1.5.2",
|
||||
"@types/jasmine": "^2.8.8",
|
||||
|
@ -5,10 +5,6 @@
|
||||
"declaration": true,
|
||||
"sourceMap": true,
|
||||
"outDir": "dist",
|
||||
"typeRoots": [
|
||||
"node_modules/@types",
|
||||
"src/utils"
|
||||
],
|
||||
"lib": [
|
||||
"dom",
|
||||
"es2017"
|
||||
@ -30,4 +26,4 @@
|
||||
"node_modules",
|
||||
"dist"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user