New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@webcomponents/shadycss
Advanced tools
@webcomponents/shadycss - npm Package Compare versions
Comparing version 1.9.6 to 1.10.0
| { | ||
| "name": "@webcomponents/shadycss", | ||
| "version": "1.9.6", | ||
| "description": "Styling helpers for ShadyDOM", | ||
| "main": "shadycss.min.js", | ||
| "repository": "github:webcomponents/polyfills", | ||
| "bugs": "https://github.com/webcomponents/polyfills/issues", | ||
| "homepage": "https://webcomponents.org/polyfills", | ||
| "version": "1.10.0", | ||
| "description": "Polyfill for Scoped CSS", | ||
| "main": "src/interface.js", | ||
| "module": "src/interface.js", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/webcomponents/polyfills.git", | ||
| "directory": "packages/shadycss" | ||
| }, | ||
| "bugs": "https://github.com/webcomponents/polyfills/issues?q=is%3Aissue+is%3Aopen+label%3A\"Package%3A+shadycss\"", | ||
| "homepage": "https://github.com/webcomponents/polyfills/tree/master/packages/shadycss", | ||
| "author": "The Polymer Project Authors (https://polymer.github.io/AUTHORS.txt)", | ||
@@ -22,5 +27,10 @@ "license": "BSD-3-Clause", | ||
| "scripts": { | ||
| "build": "gulp", | ||
| "build": "npm run build:interface && gulp", | ||
| "build:interface": "npm run clean:interface && tsc", | ||
| "clean:interface": "rimraf 'src/interface.*' .tsbuildinfo", | ||
| "build:watch": "chokidar --initial 'src/**/*.js' 'ts_src/**/*.ts' --ignore 'src/interface.js' -c 'npm run build'", | ||
| "debug": "gulp debug", | ||
| "lint": "eslint src entrypoints", | ||
| "lint:interface": "(cd ts_src && eslint '**/*.ts')", | ||
| "format:interface": "prettier --write 'ts_src/**/*.ts'", | ||
| "prepack": "npm run build" | ||
@@ -36,6 +46,14 @@ }, | ||
| "src/**/*.js", | ||
| "externs/**/*.js" | ||
| "src/**/*.js.map", | ||
| "src/**/*.d.ts", | ||
| "externs/**/*.js", | ||
| "ts_src/**/*.ts" | ||
| ], | ||
| "devDependencies": { | ||
| "rollup-stream": "=1.23.1", | ||
| "@typescript-eslint/eslint-plugin": "^2.31.0", | ||
| "@typescript-eslint/parser": "^2.31.0", | ||
| "prettier": "^2.0.5", | ||
| "rimraf": "^3.0.2", | ||
| "typescript": "^3.8.3", | ||
| "vinyl-buffer": "^1.0.1", | ||
@@ -46,4 +64,3 @@ "vinyl-source-stream": "^2.0.0" | ||
| "access": "public" | ||
| }, | ||
| "gitHead": "9f73cf59a68fcbd789426cb476e6c21946796958" | ||
| } | ||
| } |
119
README.md
@@ -17,4 +17,14 @@ # ShadyCSS | ||
| All libraries will expose an object on `window` named `ShadyCSS` with the following interface: | ||
| ## Interacting | ||
| Import the `@webcomponents/shadycss` module to interact with ShadyCSS. Note this | ||
| module does not _load_ the polyfill, instead this module is used to interact | ||
| with ShadyCSS _if_ the polyfill is loaded, and is safe to use whether or not | ||
| ShadyCSS is loaded. | ||
| ### Legacy global API | ||
| There is also a legacy global API exposed on `window.ShadyCSS`. Prefer use of | ||
| the `@webcomponents/shadycss` module described above. | ||
| ```js | ||
@@ -76,6 +86,6 @@ ShadyCSS = { | ||
| } | ||
| #container.my-element > * { | ||
| my-element#container > * { | ||
| color: gray; | ||
| } | ||
| #foo.my-element { | ||
| my-element#foo { | ||
| color: black; | ||
@@ -226,13 +236,21 @@ } | ||
| 1. First, call `ShadyCSS.prepareTemplate(template, name)` on a | ||
| 1. Import the ShadyCSS interface module. (Note that this module does not load | ||
| the polyfill itself, rather it provides functions for interfacing with | ||
| ShadyCSS _if_ it is loaded.) | ||
| ```typescript | ||
| import * as shadyCss from '@webcomponents/shadycss'; | ||
| ``` | ||
| 2. First, call `shadyCss.prepareTemplate(template, name)` on a | ||
| `<template>` element that will be imported into a `shadowRoot`. | ||
| 2. When the element instance is connected, call `ShadyCSS.styleElement(element)` | ||
| 3. When the element instance is connected, call `shadyCss.styleElement(element)`. | ||
| 3. Create and stamp the element's shadowRoot | ||
| 4. Create and stamp the element's shadowRoot. | ||
| 4. Whenever dynamic updates are required, call `ShadyCSS.styleSubtree(element)`. | ||
| 5. Whenever dynamic updates are required, call `shadyCss.styleSubtree(element)`. | ||
| 5. If a styling change is made that may affect the whole document, call | ||
| `ShadyCSS.styleDocument()`. | ||
| 6. If a styling change is made that may affect the whole document, call | ||
| `shadyCss.styleSubtree(document.documentElement)`. | ||
@@ -263,9 +281,11 @@ The following example uses ShadyCSS and ShadyDOM to define a custom element. | ||
| </template> | ||
| <script> | ||
| // Use polyfill only in browsers that lack native Shadow DOM. | ||
| window.ShadyCSS && ShadyCSS.prepareTemplate(myElementTemplate, 'my-element'); | ||
| <script type="module"> | ||
| import * as shadyCss from '@webcomponents/shadycss'; | ||
| const myElementTemplate = document.body.querySelector('#myElementTemplate'); | ||
| shadyCss.prepareTemplate(myElementTemplate, 'my-element'); | ||
| class MyElement extends HTMLElement { | ||
| connectedCallback() { | ||
| window.ShadyCSS && ShadyCSS.styleElement(this); | ||
| shadyCSS.styleElement(this); | ||
| if (!this.shadowRoot) { | ||
@@ -283,54 +303,8 @@ this.attachShadow({mode: 'open'}); | ||
| ## Type Extension elements | ||
| ShadyCSS can also be used with type extension elements by supplying the base | ||
| element name to `prepareTemplate` as a third argument. | ||
| ### Example | ||
| ```html | ||
| <template id="myElementTemplate"> | ||
| <style> | ||
| :host { | ||
| display: block; | ||
| padding: 8px; | ||
| } | ||
| #content { | ||
| background-color: var(--content-color); | ||
| } | ||
| .slot-container ::slotted(*) { | ||
| border: 1px solid steelblue; | ||
| margin: 4px; | ||
| } | ||
| </style> | ||
| <div id="content">Content</div> | ||
| <div class="slot-container"> | ||
| <slot></slot> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| window.ShadyCSS && ShadyCSS.prepareTemplate(myElementTemplate, 'my-element', 'div'); | ||
| class MyElement extends HTMLDivElement { | ||
| connectedCallback() { | ||
| window.ShadyCSS && ShadyCSS.styleElement(this); | ||
| if (!this.shadowRoot) { | ||
| this.attachShadow({mode: 'open'}); | ||
| this.shadowRoot.appendChild( | ||
| document.importNode(myElementTemplate.content, true)); | ||
| } | ||
| } | ||
| } | ||
| customElements.define('my-element', MyElement, {extends: 'div'}); | ||
| </script> | ||
| ``` | ||
| ## Imperative values for Custom properties | ||
| To set the value of a CSS Custom Property imperatively, `ShadyCSS.styleSubtree` | ||
| and `ShadyCSS.styleDocument` support an additional argument of an object mapping | ||
| variable name to value. | ||
| To set the value of a CSS Custom Property imperatively, use the `styleSubtree` | ||
| function from the `@webcomponents/shadycss` module. This function supports an | ||
| additional argument of an object mapping variable name to value, and works | ||
| whether or not ShadyCSS is loaded. | ||
@@ -344,8 +318,11 @@ When using ApplyShim, defining new mixins or new values for current mixins imperatively is not | ||
| <my-element>Text</my-element> | ||
| <script> | ||
| let el = document.querySelector('my-element#a'); | ||
| <script type="module"> | ||
| import * as shadyCSS from '@webcomponents/shadycss'; | ||
| const el = document.querySelector('my-element#a'); | ||
| // Set the color of all my-element instances to 'green' | ||
| ShadyCSS.styleDocument({'--content-color' : 'green'}); | ||
| shadyCss.styleSubtree(document.documentElement, {'--content-color' : 'green'}); | ||
| // Set the color my-element#a's text to 'red' | ||
| ShadyCSS.styleSubtree(el, {'--content-color' : 'red'}); | ||
| shadyCss.styleSubtree(el, {'--content-color' : 'red'}); | ||
| </script> | ||
@@ -366,4 +343,4 @@ ``` | ||
| Dynamic changes are not automatically applied. If elements change such that they | ||
| conditionally match selectors they did not previously, `ShadyCSS.styleDocument()` | ||
| must be called. | ||
| conditionally match selectors they did not previously, | ||
| `styleElement(document.documentElement)` must be called. | ||
@@ -379,4 +356,4 @@ For a given element's shadowRoot, only 1 value is allowed per custom properties. | ||
| If `ShadyCSS.applyStyle` is never called, `<custom-style>` elements will process | ||
| after HTML Imports have loaded, after the document loads, or after the next paint. | ||
| If `applyStyle` is never called, `<custom-style>` elements will process after | ||
| HTML Imports have loaded, after the document loads, or after the next paint. | ||
| This means that there may be a flash of unstyled content on the first load. | ||
@@ -383,0 +360,0 @@ |
New alerts
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
No bug tracker
MaintenancePackage does not have a linked bug tracker in package.json.
Found 1 instance in 1 package
Fixed alerts
No bug tracker
MaintenancePackage does not have a linked bug tracker in package.json.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.71%
475003
- Number of package files
- increased by15.15%
38
- Lines of code
- increased by5.62%
4510
- Number of low supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Dev dependency count
- increased by166.67%
8
- Number of lines in readme file
- decreased by-5.69%
381
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes