element-internals-polyfill - npm Package Compare versions

Comparing version 0.0.10 to 0.0.11

CHANGELOG.md

@@ -5,2 +5,4 @@ # Changelog
 
+### [0.0.11](https://github.com/calebdwilliams/element-internals-polyfill/compare/v0.0.10...v0.0.11) (2020-04-27)
+
 ### [0.0.10](https://github.com/calebdwilliams/element-internals-polyfill/compare/v0.0.9...v0.0.10) (2020-04-27)
@@ -7,0 +9,0 @@

dist/element-internals.js

@@ -403,5 +403,7 @@ (function () {
 
-    class FormData extends window.FormData {
+    const formDataOriginal = window.FormData;
+
+    class FormData {
       constructor(form) {
-        super(form);
+        const data = new formDataOriginal(form);
         if (form && formElementsMap.has(form)) {
@@ -412,6 +414,7 @@ const refs = formElementsMap.get(form);
               const value = refValueMap.get(ref);
-              this.set(ref.getAttribute('name'), value);
+              data.set(ref.getAttribute('name'), value);
             }
           });
         }
+        return data;
       }
@@ -418,0 +421,0 @@ }

package.json

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

README.md

 # Element Internals Polyfill
 
-This package is a polyfill for the [`ElementInternals` standard](https://html.spec.whatwg.org/multipage/custom-elements.html#the-elementinternals-interface). The specification is supported by current releases of Google's Chrome.
+This package is a polyfill for the [`ElementInternals` standard](https://html.spec.whatwg.org/multipage/custom-elements.html#the-elementinternals-interface). The specification is supported by current releases of Google's Chrome.
+
+## Use case
+
+The primary use case for `ElementInternals` right now is allowing custom elements full participation in HTML forms. To do this, it provides any element designated as `formAssociated` access to a handful of utilities.
+
+## Installation
+
+This package is available on `npm` under the name `construct-style-sheet-polyfill`
+and can be installed with [npm](https://docs.npmjs.com/getting-started),
+[yarn](https://yarnpkg.com/en/docs/getting-started), [unpkg](https://unpkg.com)
+or however else you consume dependencies.
+
+### Example commands: 
+
+npm:
+```bash
+npm i element-internals-polyfill
+```
+
+yarn:
+```bash
+yarn add element-internals-polyfill
+```
+
+unpkg:
+```javascript
+import 'https://unpkg.com/element-internals-polyfill';
+```
+
+## How it works
+
+To do this, add the `static get formAssociated` to a custom element and call the `attachInternals` method to return a new instance of the `ElementInternals` interface:
+
+```javascript
+class MyInput extends HTMLElement {
+  static get formAssociated() {
+    return true;
+  }
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+  }
+}
+```
+
+This works by doing several things under the hood. First, there is a feature check for the `ElementInternals` object on the window. If that does not exist, the polyfill wires up a global [`MutationObserver`](https://developer.mozilla.org/en/docs/Web/API/MutationObserver) on the document to watch for additions to the DOM that the polyfill might need.
+
+It also monkey-patches `HTMLElement.prototype.attachShadow` to wire up a similar listener on any created shadow roots and to remove the watcher if the shadow root is removed.
+
+The polyfill will also monkey-patch `window.FormData` to attach any custom elements to that feature as well.
+
+The currently-supported features of `ElementInternals` for form-associated custom elements are
+
+## Current limitations
+
+Right now providing a cross-browser compliant version of `ElementInternals.reportValidity` is not supported. The method essentially behaves as a proxy for `ElementInternals.checkValidity`.

No alert changes

Improved metrics

Total package byte prevSize

20512

increased by12.33%

Lines of code

367

increased by0.55%

Number of lines in readme file

60

increased by1900%

No dependency changes