element-internals-polyfill - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/index.js

		@@ -362,3 +362,3 @@ (function () {
		if (ref.part) {
		ref.part.add(`state--${state}`);
		ref.part.add(`state${state}`);
		}
		@@ -378,3 +378,3 @@ return result;
		if (ref.part) {
		ref.part.remove(`state--${state}`);
		ref.part.remove(`state${state}`);
		}
		@@ -381,0 +381,0 @@ return result;

package.json

		{
		"name": "element-internals-polyfill",
		"version": "1.0.0",
		"version": "1.0.1",
		"description": "A polyfill for the element internals specification",
		@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

		@@ -155,3 +155,3 @@ # Element Internals Polyfill

		`ElementInternals` exposes an API for creating custom states on an element. For instance if a developer wanted to signify to users that an element was in state `foo`, they could call `internals.states.set('--foo')`. This would make the element match the selector `:--foo`. Unfortunately in non-supporting browsers this is an invalid selector and will throw an error in JS and would cause the parsing of a CSS rule to fail. As a result, this polyfill will add states using the `state--foo` attribute to the host element.
		`ElementInternals` exposes an API for creating custom states on an element. For instance if a developer wanted to signify to users that an element was in state `foo`, they could call `internals.states.set('--foo')`. This would make the element match the selector `:--foo`. Unfortunately in non-supporting browsers this is an invalid selector and will throw an error in JS and would cause the parsing of a CSS rule to fail. As a result, this polyfill will add states using the `state--foo` attribute to the host element, as well as a `state--foo` shadow part in supporting browsers.

		@@ -172,2 +172,16 @@ In order to properly select these elements in CSS, you will need to duplicate your rule as follows:

		The shadow part allows matching the custom state from _outside_ a shadow tree, with similarly duplicated rules:

		```css
		/** Supporting browsers */
		::part(bar):--foo {
		color: rebeccapurple;
		}

		/** Polyfilled browsers (that however support shadow parts) */
		::part(bar state--foo) {
		color: rebeccapurple;
		}
		```

		Trying to combine selectors like `:--foo, [state--foo]` will cause the parsing of the rule to fail because `:--foo` is an invalid selector. As a potential optimization, you can use CSS `@supports` as follows:
		@@ -192,5 +206,6 @@
		- It is currently impossible to set form states to `:invalid` and `:valid` so this polyfill replaces those with the `[internals-invalid]` and `[internals-valid]` attributes on the host element. The proper selector for invalid elements will be `:host(:invalid), :host([internals-invalid])`.
		- Exposing custom states as shadow parts means that any element using custom states in a shadow tree can be matched using `::part(state--foo)` in polyfilled browsers, even if the author didn't intend to expose it. This was deemed an acceptable trade-off, compared to tracking explicitly exposed elements using a mutation observer.

		## A note about versioning

		This packages doesn't necessarily follow semantic versioning. As the spec is still under consideration and implementation by browser vendors, the features supported by this package will change (generally following Chrome's implementation).
		This packages doesn't necessarily follow semantic versioning. As the spec is still under consideration and implementation by browser vendors, the features supported by this package will change (generally following Chrome's implementation).

element-internals-polyfill - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics