mirror of
https://gitee.com/shuto-github/Shadow-DOM-inject-styles.git
synced 2024-10-06 04:02: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
|
# Shadow-DOM-inject-styles
|
||||||
A helper function to easily modify Shadow DOM CSS.
|
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
|
```ts
|
||||||
import {injectStyles} from 'shadow-dom-inject-styles';
|
import {injectStyles} from 'shadow-dom-inject-styles';
|
||||||
|
|
||||||
const toolbar = (this.el.querySelector('ion-header > ion-toolbar') as HTMLElement);
|
const toolbar = (this.el.querySelector('ion-header > ion-toolbar') as HTMLElement);
|
||||||
|
|
||||||
// language=CSS
|
// language=CSS
|
||||||
const styles = `
|
const styles = `
|
||||||
.toolbar-background {
|
.toolbar-background {
|
||||||
@ -14,4 +48,4 @@ const styles = `
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
injectStyles(toolbar, '.toolbar-background', styles);
|
injectStyles(toolbar, '.toolbar-background', styles);
|
||||||
```
|
```
|
||||||
|
14
package.json
14
package.json
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "shadow-dom-inject-styles",
|
"name": "shadow-dom-inject-styles",
|
||||||
"version": "1.0.1",
|
"version": "1.0.2",
|
||||||
"description": "A helper function to easily modify shadow dom css.",
|
"description": "A helper function to easily modify shadow dom css.",
|
||||||
"module": "./dist/index.js",
|
"module": "./dist/index.js",
|
||||||
"main": "./dist/index.js",
|
"main": "./dist/index.js",
|
||||||
@ -13,6 +13,18 @@
|
|||||||
},
|
},
|
||||||
"author": "Adam LaCombe",
|
"author": "Adam LaCombe",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"keywords": [
|
||||||
|
"shadow-dom",
|
||||||
|
"css",
|
||||||
|
"styles",
|
||||||
|
"ionic",
|
||||||
|
"stencil",
|
||||||
|
"stenciljs",
|
||||||
|
"angular",
|
||||||
|
"vue",
|
||||||
|
"typescript",
|
||||||
|
"javascript"
|
||||||
|
],
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@studio/changes": "^1.5.2",
|
"@studio/changes": "^1.5.2",
|
||||||
"@types/jasmine": "^2.8.8",
|
"@types/jasmine": "^2.8.8",
|
||||||
|
@ -5,10 +5,6 @@
|
|||||||
"declaration": true,
|
"declaration": true,
|
||||||
"sourceMap": true,
|
"sourceMap": true,
|
||||||
"outDir": "dist",
|
"outDir": "dist",
|
||||||
"typeRoots": [
|
|
||||||
"node_modules/@types",
|
|
||||||
"src/utils"
|
|
||||||
],
|
|
||||||
"lib": [
|
"lib": [
|
||||||
"dom",
|
"dom",
|
||||||
"es2017"
|
"es2017"
|
||||||
@ -30,4 +26,4 @@
|
|||||||
"node_modules",
|
"node_modules",
|
||||||
"dist"
|
"dist"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user