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

View File

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

View File

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