update readme

This commit is contained in:
Adam LaCombe 2018-12-04 09:23:46 -05:00
parent 95f3fcd17c
commit ab751443b4
3 changed files with 50 additions and 8 deletions

View File

@ -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);
```
```

View File

@ -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",

View File

@ -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"
]
}
}