();
262 | initSet.add(ref);
263 | formElementsMap.set(form, initSet);
264 |
265 | /** Add listeners to emulate validation and reset behavior */
266 | wireSubmitLogic(form);
267 | form.addEventListener("reset", formResetCallback);
268 | form.addEventListener("input", formInputCallback);
269 | form.addEventListener("change", formChangeCallback);
270 | }
271 |
272 | formsMap.set(form, { ref, internals });
273 |
274 | /** Call formAssociatedCallback if applicable */
275 | if (ref.constructor["formAssociated"] && ref.formAssociatedCallback) {
276 | setTimeout(() => {
277 | ref.formAssociatedCallback.apply(ref, [form]);
278 | }, 0);
279 | }
280 | setFormValidity(form);
281 | }
282 | };
283 |
284 | /**
285 | * Recursively look for an element's parent form
286 | * @param {Element} elem - The element to look for a parent form
287 | * @return {HTMLFormElement|null} - The parent form, if one exists
288 | */
289 | export const findParentForm = (elem) => {
290 | let parent = elem.parentNode;
291 | if (parent && parent.tagName !== "FORM") {
292 | parent = findParentForm(parent);
293 | }
294 | return parent;
295 | };
296 |
297 | /**
298 | * Throw an error if the element ref is not form associated
299 | * @param ref {HTMLElement} - The element to check if it is form associated
300 | * @param message {string} - The error message to throw
301 | * @param ErrorType {any} - The error type to throw, defaults to DOMException
302 | */
303 | export const throwIfNotFormAssociated = (
304 | ref: HTMLElement,
305 | message: string,
306 | ErrorType: any = DOMException
307 | ): void => {
308 | if (!ref.constructor["formAssociated"]) {
309 | throw new ErrorType(message);
310 | }
311 | };
312 |
313 | /**
314 | * Called for each HTMLFormElement.checkValidity|reportValidity
315 | * will loop over a form's added components and call the respective
316 | * method modifying the default return value if needed
317 | * @param form {HTMLFormElement} - The form element to run the method on
318 | * @param returnValue {boolean} - The initial result of the original method
319 | * @param method {'checkValidity'|'reportValidity'} - The original method
320 | * @returns {boolean} The form's validity state
321 | */
322 | export const overrideFormMethod = (
323 | form: HTMLFormElement,
324 | returnValue: boolean,
325 | method: "checkValidity" | "reportValidity"
326 | ): boolean => {
327 | const elements = formElementsMap.get(form);
328 |
329 | /** Some forms won't contain form associated custom elements */
330 | if (elements && elements.size) {
331 | elements.forEach((element) => {
332 | const internals = internalsMap.get(element);
333 | const valid = internals[method]();
334 | if (!valid) {
335 | returnValue = false;
336 | }
337 | });
338 | }
339 | return returnValue;
340 | };
341 |
342 | /**
343 | * Will upgrade an ElementInternals instance by initializing the
344 | * instance's form and labels. This is called when the element is
345 | * either constructed or appended from a DocumentFragment
346 | * @param ref {HTMLElement} - The custom element to upgrade
347 | */
348 | export const upgradeInternals = (ref: FormAssociatedCustomElement): boolean => {
349 | let attached = false;
350 | if (ref.constructor["formAssociated"]) {
351 | let internals = internalsMap.get(ref);
352 | // we might have cases where the internals are not set
353 | if (internals === undefined) {
354 | ref.attachInternals();
355 | internals = internalsMap.get(ref);
356 | attached = true;
357 | }
358 | const { labels, form } = internals;
359 | initLabels(ref, labels);
360 | initForm(ref, form, internals);
361 | }
362 | return attached;
363 | };
364 |
365 | /**
366 | * Check to see if MutationObserver exists in the current
367 | * execution context. Will likely return false on the server
368 | * @returns {boolean}
369 | */
370 | export function mutationObserverExists(): boolean {
371 | return typeof MutationObserver !== "undefined";
372 | }
373 |
--------------------------------------------------------------------------------
/static/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | ElementInternals polyfill
5 |
6 |
7 |
8 |
9 |
10 |
11 |
25 |
26 | Issue 31
27 |
28 |
29 | Issue 30
30 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/static/safari.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Appended via tree test
5 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/static/scripts/address.js:
--------------------------------------------------------------------------------
1 | const addressSheet = new CSSStyleSheet();
2 | addressSheet.replace('input { display: block; } fieldset { display: flex; flex-flow: column; gap: 16px; border: 1px solid #ccc}');
3 |
4 | class Address extends HTMLElement {
5 | static get formAssociated() {
6 | return true;
7 | }
8 |
9 | connectedCallback() {
10 | const root = this.attachShadow({ mode: 'open' });
11 | root.adoptedStyleSheets = [addressSheet];
12 | this.internals = this.attachInternals();
13 | const form = document.createElement('form');
14 | form.innerHTML = `
15 | `;
24 | root.append(form);
25 |
26 | // this.log();
27 | form.addEventListener('submit', this.log.bind(this));
28 |
29 | root.querySelector('[type="button"]')
30 | .addEventListener('click', this._other.bind(this));
31 | }
32 |
33 | _other() {
34 | this.shadowRoot.querySelector('input').remove();
35 | }
36 |
37 | log(event) {
38 | if (event) {
39 | event.preventDefault();
40 | }
41 | const internalFormData = new FormData(
42 | this.shadowRoot.querySelector('form')
43 | );
44 | this.internals.setFormValue(
45 | internalFormData
46 | );
47 |
48 | const allData = new FormData(this.internals.form);
49 |
50 | for (let [key, value] of allData.entries()) {
51 | console.log({ [key]: value });
52 | }
53 | }
54 | }
55 |
56 | customElements.define('x-address', Address);
57 |
--------------------------------------------------------------------------------
/static/scripts/foo-bar.js:
--------------------------------------------------------------------------------
1 | export class FooBar extends HTMLElement {
2 | static get formAssociated() { return true; }
3 | static get observedAttributes() { return ['required', 'disabled']; }
4 |
5 | constructor() {
6 | super();
7 | this.attachShadow({
8 | mode: 'open',
9 | delegatesFocus: true
10 | });
11 | this.internals_ = this.attachInternals();
12 | this.internals_.ariaChecked = true;
13 | this._handleChanges = this._handleChanges.bind(this);
14 | }
15 |
16 | connectedCallback() {
17 | this.shadowRoot.innerHTML = `
18 |
23 |
24 | `;
25 | this.input = this.shadowRoot.querySelector('input');
26 |
27 | this._init();
28 | this.required = this.hasAttribute('required');
29 | }
30 |
31 | attributeChangedCallback(name, oldValue, newValue) {
32 | const booleanAttributes = ['required', 'disabled'];
33 | if (booleanAttributes.includes(name)) {
34 | if (this.hasAttribute(name) && !this[name]) {
35 | this[name] = true;
36 | } else if (!this.hasAttribute(name) && this[name]) {
37 | this[name] = false;
38 | }
39 | } else if (newValue !== oldValue) {
40 | this[name] = newValue;
41 | }
42 | }
43 |
44 | formAssociatedCallback(form) {
45 | console.log({form})
46 | }
47 |
48 | formDisabledCallback(isDisabled) {
49 | console.log({isDisabled})
50 | this.input.disabled = isDisabled;
51 | }
52 |
53 | formResetCallback() {
54 | this.input.value = '';
55 | this.internals_.setFormValue('');
56 | }
57 |
58 | _init() {
59 | this.input.addEventListener('input', this._handleChanges);
60 |
61 | if (this.required) {
62 | this._handleRequired(this.value);
63 | }
64 | }
65 |
66 | _handleChanges(event) {
67 | const { value } = event.target;
68 | this.value = value;
69 |
70 | this._handleRequired(value);
71 | }
72 |
73 | _handleRequired(value) {
74 | if (!value) {
75 | this.internals_.setValidity({
76 | valueMissing: true
77 | }, 'This field is required');
78 | } else {
79 | this.internals_.setValidity({});
80 | }
81 | }
82 |
83 | get required() {
84 | return this.hasAttribute('required');
85 | }
86 |
87 | set required(required) {
88 | this.toggleAttribute('required', required);
89 | this.setAttribute('aria-required', !!required);
90 | this._handleRequired(!required);
91 | }
92 |
93 | get value() {
94 | return this._value;
95 | }
96 |
97 | set value(value) {
98 | this._value = value;
99 | this.internals_.setFormValue(value);
100 | return true;
101 | }
102 |
103 | get checkValidity() {
104 | return () => this.internals_.checkValidity();
105 | }
106 |
107 | get validity() {
108 | return this.internals_.validity;
109 | }
110 |
111 | focus() {
112 | super.focus();
113 | this.input.focus();
114 | }
115 | }
116 |
117 | customElements.define('foo-bar', FooBar);
118 |
--------------------------------------------------------------------------------
/static/scripts/issue30.js:
--------------------------------------------------------------------------------
1 | import { html, render } from 'https://cdn.skypack.dev/lit';
2 |
3 | const sheet = new CSSStyleSheet();
4 | sheet.replace(`:host {
5 | display: block;
6 | height: 30px;
7 | background: green;
8 | }
9 | :host(:invalid), :host([internals-invalid]) {
10 | background: red;
11 | }
12 | :host(:valid) {
13 | background: tomato;
14 | }`);
15 |
16 | const template = document.createElement('template');
17 | template.innerHTML = ' invalid events';
18 |
19 | class MyComponent extends HTMLElement {
20 | static get formAssociated() { return true; }
21 |
22 | constructor() {
23 | super();
24 | this.internals = this.attachInternals();
25 | this.count = 0;
26 | this.addEventListener('invalid', () => this.render(1));
27 | const root = this.attachShadow({mode: 'open'});
28 | root.adoptedStyleSheets = [sheet];
29 | root.append(template.content.cloneNode(true));
30 | this._count = root.querySelector('.count');
31 | // console.log({constructed: this.getAttribute('name'), internals: this.internals.form });
32 | }
33 |
34 | connectedCallback() {
35 | // console.log({connected: this.getAttribute('name')});
36 | this.internals.setValidity({ valueMissing: true }, 'aaaa');
37 | this.render(0);
38 | }
39 |
40 | render(increment) {
41 | this.count += increment;
42 | this._count.innerText = this.count;
43 | }
44 | }
45 |
46 | customElements.define('my-component', MyComponent);
47 |
48 | const form = document.querySelector('form');
49 |
50 | // const submit = document.querySelector('#submit').addEventListener('click', (e)=>{
51 | // form.submit();
52 | // });
53 | form.addEventListener('invalid', console.log);
54 | const reportValidity = document.querySelector('#reportValidity').addEventListener('click', (e)=>{
55 | alert(form.reportValidity());
56 | });
57 | const checkValidity = document.querySelector('#checkValidity').addEventListener('click', (e)=>{
58 | alert(form.checkValidity());
59 | });
60 |
61 | render(
62 | html``,
69 | document.getElementById('test')
70 | );
71 |
--------------------------------------------------------------------------------
/static/scripts/page.js:
--------------------------------------------------------------------------------
1 | import 'https://cdn.skypack.dev/construct-style-sheets-polyfill';
2 | import './x-array.js';
3 | import './address.js';
4 | import './issue30.js';
5 |
6 | const form = document.getElementById('form');
7 |
8 | form.addEventListener('submit', event => {
9 | event.preventDefault();
10 |
11 | const formData = new FormData(event.target);
12 | const formValue = {};
13 |
14 | formData.forEach((value, name) => {
15 | formValue[name] = value;
16 | });
17 |
18 | console.log(formValue);
19 | });
20 |
21 | const div = document.createElement('div');
22 | document.body.append(div);
23 | const testRoot = div.attachShadow({ mode: 'open' });
24 | const shadowForm = document.createElement('form');
25 | shadowForm.id = 'shadowTestForm';
26 | const fooBar = document.createElement('foo-bar');
27 | fooBar.required = true;
28 | testRoot.append(shadowForm);
29 | testRoot.append(fooBar);
30 | setTimeout(() => {
31 | console.log('start');
32 | shadowForm.append(fooBar);
33 | console.log('finish', fooBar);
34 | }, 2000);
35 |
--------------------------------------------------------------------------------
/static/scripts/x-array.js:
--------------------------------------------------------------------------------
1 | class XArray extends HTMLElement {
2 | static get formAssociated() {
3 | return true;
4 | }
5 |
6 | connectedCallback() {
7 | this.internals = this.attachInternals();
8 | this.internals.setFormValue({a:1,b:2});
9 |
10 | console.log(this.getAttribute('name'),
11 | new FormData(this.internals.form)
12 | .get(this.getAttribute('name'))
13 | )
14 | }
15 | }
16 |
17 | customElements.define('x-array', XArray);
18 |
--------------------------------------------------------------------------------
/static/styles/page.css:
--------------------------------------------------------------------------------
1 | label {
2 | display: block;
3 | }
4 |
5 | label + * {
6 | margin-bottom: 1rem;
7 | }
8 |
9 | button {
10 | display: block;
11 | }
12 |
--------------------------------------------------------------------------------
/test/CustomStateSet.test.ts:
--------------------------------------------------------------------------------
1 | import '../dist/index.js';
2 |
3 | import { fixture, html, expect, fixtureCleanup, aTimeout } from '@open-wc/testing';
4 | import { ICustomElement } from '../dist';
5 | import { CustomStateSet } from '../src/CustomStateSet';
6 |
7 | class CustomElementAddStateInConstructor extends HTMLElement {
8 | internals = this.attachInternals();
9 | constructor() {
10 | super();
11 |
12 | this.internals.states.add('--foo');
13 | }
14 | }
15 |
16 | const addStateTagName = 'custom-element-add-state-in-constructor';
17 | customElements.define(addStateTagName, CustomElementAddStateInConstructor);
18 |
19 | class CustomElementDeleteStateInConstructor extends HTMLElement {
20 | internals = this.attachInternals();
21 | constructor() {
22 | super();
23 |
24 | this.internals.states.delete('--foo');
25 | }
26 | }
27 |
28 | const deleteStateTagName = 'custom-element-delete-state-in-constructor';
29 | customElements.define(deleteStateTagName, CustomElementDeleteStateInConstructor);
30 |
31 | describe('CustomStateSet polyfill', () => {
32 | let el: HTMLElement;
33 | let set: CustomStateSet;
34 |
35 | beforeEach(async () => {
36 | el = await fixture(html``);
37 | set = new CustomStateSet(el as ICustomElement);
38 | });
39 |
40 | afterEach(() => {
41 | fixtureCleanup();
42 | });
43 |
44 | it('will add attributes and parts', async () => {
45 | set.add('--foo');
46 | expect(el.hasAttribute('state--foo')).to.be.true;
47 | if (el.part) {
48 | expect(el.part.contains('state--foo')).to.be.true;
49 | }
50 | });
51 |
52 | it('will remove attributes and parts', async () => {
53 | set.add('--foo');
54 | expect(el.hasAttribute('state--foo')).to.be.true;
55 | if (el.part) {
56 | expect(el.part.contains('state--foo')).to.be.true;
57 | }
58 |
59 | set.delete('--foo');
60 | expect(el.hasAttribute('state--foo')).to.be.false;
61 | if (el.part) {
62 | expect(el.part.contains('state--foo')).to.be.false;
63 | }
64 | });
65 |
66 | it('will clear all attributes and parts', async () => {
67 | set.add('--foo');
68 | set.add('--bar');
69 |
70 | expect(el.hasAttribute('state--foo')).to.be.true;
71 | expect(el.hasAttribute('state--bar')).to.be.true;
72 | if (el.part) {
73 | expect(el.part.contains('state--foo')).to.be.true;
74 | expect(el.part.contains('state--bar')).to.be.true;
75 | }
76 |
77 | set.clear();
78 | expect(el.hasAttribute('state--foo')).to.be.false;
79 | expect(el.hasAttribute('state--bar')).to.be.false;
80 | if (el.part) {
81 | expect(el.part.contains('state--foo')).to.be.false;
82 | expect(el.part.contains('state--bar')).to.be.false;
83 | }
84 | });
85 |
86 | it('will use a timeout if a state is added in a constructor', async () => {
87 | let el;
88 | expect(() => {
89 | el = document.createElement(addStateTagName);
90 | }).not.to.throw();
91 |
92 | if (window.CustomStateSet.isPolyfilled) {
93 | await aTimeout(100);
94 | expect(el.internals.states.has('--foo')).to.be.true;
95 | } else {
96 | expect(el.internals.states.has('--foo')).to.be.true;
97 | }
98 | });
99 |
100 | it('will use a timeout if a state is deleted in a constructor', async () => {
101 | let el;
102 | expect(() => {
103 | el = document.createElement(deleteStateTagName);
104 | }).not.to.throw();
105 |
106 | if (window.CustomStateSet.isPolyfilled) {
107 | await aTimeout(100);
108 | expect(el.matches('[state--foo]')).to.be.false;
109 | } else {
110 | expect(el.internals.states.has('--foo')).to.be.false;
111 | }
112 | });
113 | });
114 |
--------------------------------------------------------------------------------
/test/ElementInternals.test.js:
--------------------------------------------------------------------------------
1 | import {
2 | aTimeout,
3 | elementUpdated,
4 | expect,
5 | fixture,
6 | fixtureCleanup,
7 | html,
8 | } from '@open-wc/testing';
9 | import '../dist/index.js';
10 |
11 | let callCount = 0;
12 | let internalsAvailableInFormAssociatedCallback = false;
13 |
14 | window.onFormSubmit = (event) => {
15 | event.preventDefault();
16 | callCount += 1;
17 | };
18 |
19 | class CustomElement extends HTMLElement {
20 | static get formAssociated() {
21 | return true;
22 | }
23 |
24 | constructor() {
25 | super();
26 | const root = this.attachShadow({ mode: 'open' });
27 | this.internals = this.attachInternals();
28 | root.innerHTML = '';
29 |
30 | this._value = '';
31 | }
32 |
33 | connectedCallback() {
34 | this.tabIndex = -1;
35 | this.input = this.shadowRoot.querySelector('input');
36 | }
37 |
38 | set disabled(disabled) {
39 | this._disabled = disabled;
40 | this.toggleAttribute('disabled', disabled);
41 | }
42 |
43 | get disabled() {
44 | return this._disabled;
45 | }
46 |
47 | set required(required) {
48 | this._required = required;
49 | this.toggleAttribute('required', required);
50 | if (!this.value) {
51 | this.internals.setValidity({
52 | valueMissing: true
53 | }, 'This field is required');
54 | } else {
55 | this.internals.setValidity({
56 | valueMissing: false
57 | });
58 | }
59 | }
60 |
61 | get required() {
62 | return this._required;
63 | }
64 |
65 | set value(value) {
66 | this._value = value;
67 | this.internals.setFormValue(value);
68 | }
69 |
70 | get value() {
71 | return this._value;
72 | }
73 |
74 | formAssociatedCallback() {
75 | internalsAvailableInFormAssociatedCallback = !!this.internals;
76 | }
77 |
78 | formDisabledCallback() {
79 | callCount += 1;
80 | }
81 | formResetCallback() {
82 | callCount += 1;
83 | }
84 |
85 | checkValidity() { return this.internals.checkValidity(); }
86 | reportValidity() { return this.internals.reportValidity(); }
87 | }
88 |
89 | customElements.define('test-el', CustomElement);
90 |
91 | describe('The ElementInternals polyfill', () => {
92 | describe('form validity', () => {
93 | let form, input;
94 | const simultateEvent = (eventType, value = undefined, options = {"bubbles":true, "cancelable":false}) => {
95 | input.value = value;
96 | input.required = input.required;
97 | input.dispatchEvent(new Event(eventType, options));
98 | }
99 |
100 | beforeEach(async () => {
101 | form = await fixture(``);
102 | input = form.querySelector('test-el');
103 | input.required = true;
104 | simultateEvent('input');
105 | });
106 |
107 | afterEach(async () => {
108 | await fixtureCleanup(form);
109 | });
110 |
111 | it('form should be invalid when form-associated custom element is invalid', () => {
112 | expect(form.checkValidity()).to.be.false;
113 | });
114 |
115 | it('checkValidity will be true if the element is disabled', () => {
116 | input.toggleAttribute('disabled', true);
117 | expect(input.checkValidity()).to.be.true;
118 | });
119 |
120 | it('checkValidity will be true if the element is readOnly', async () => {
121 | input.toggleAttribute('readonly', true);
122 | /** Inconsistent behavior in Chrome version, bug reported */
123 | if (ElementInternals.isPolyfilled) {
124 | expect(input.checkValidity()).to.be.true;
125 | }
126 | });
127 |
128 | it('form should match form:invalid CSS selector when form-associated custom element is invalid', () => {
129 | expect(form.matches('form:is(:invalid, [internals-invalid])')).to.be.true;
130 | });
131 |
132 | it('After input event, form should be valid if all inputs are invalid', () => {
133 | simultateEvent('input', 'test');
134 | expect(form.checkValidity()).to.be.true;
135 | });
136 |
137 | it('After input event, form should match form:valid CSS selector if all inputs are valid', () => {
138 | simultateEvent('input', 'test');
139 | expect(form.matches('form:is(:valid:not([internals-invalid]), [internals-valid])')).to.be.true;
140 | });
141 |
142 | it('After change event, form should be valid if all inputs are invalid', () => {
143 | simultateEvent('change', 'test');
144 | expect(form.checkValidity()).to.be.true;
145 | });
146 |
147 | it('After change event, form should match form:valid CSS selector if all inputs are valid', () => {
148 | simultateEvent('change', 'test');
149 | expect(form.matches('form:is(:valid:not([internals-invalid]), [internals-valid])')).to.be.true;
150 | });
151 |
152 | });
153 |
154 | describe('outside the proper context', () => {
155 | let el, internals;
156 |
157 | beforeEach(async () => {
158 | el = await fixture(html``);
159 | internals = el.internals;
160 | });
161 |
162 | afterEach(async () => {
163 | await fixtureCleanup(el);
164 | });
165 |
166 | it('will throw if called directly', () => {
167 | expect(() => {
168 | new ElementInternals()
169 | }).to.throw();
170 | });
171 |
172 | it('will throw if called by a non custom element', async () => {
173 | const el = await fixture(html``);
174 | expect(() => el.attachInternals()).to.throw();
175 | });
176 | });
177 |
178 | describe('Non-formAssociated elements', () => {
179 | let element, internals;
180 |
181 | class NotFormAssociated extends HTMLElement {
182 | constructor() {
183 | super();
184 | this.internals = this.attachInternals();
185 | this.internals.role = 'generic';
186 | }
187 | }
188 |
189 | customElements.define('not-associated', NotFormAssociated);
190 |
191 | beforeEach(async () => {
192 | element = await fixture(html``);
193 | });
194 |
195 | afterEach(async () => await fixtureCleanup(element));
196 |
197 | it('will attach an object to internals even if not form associated', async () => {
198 | expect(element.internals).to.exist;
199 | });
200 |
201 | it('will throw from setFormValue', async () => {
202 | expect(() => element.internals.setFormValue('foo')).to.throw();
203 | });
204 |
205 | describe('inside a form', () => {
206 | let form;
207 |
208 | afterEach(async () => await fixtureCleanup(form));
209 |
210 | it('will not throw', async () => {
211 | form = await fixture(html``);
212 | })
213 | })
214 | });
215 |
216 | describe('inside a custom element with a form', () => {
217 | let form, el, noname, label, button, internals;
218 |
219 | beforeEach(async () => {
220 | form = await fixture(html`
221 |
227 | `);
228 | callCount = 0;
229 | label = form.querySelector('label');
230 | el = form.querySelector('test-el[id=foo]');
231 | noname = form.querySelector('test-el[id=noname]');
232 | button = form.querySelector('button');
233 | internals = el.internals;
234 | });
235 |
236 | afterEach(async () => {
237 | fixtureCleanup(form)
238 | });
239 |
240 | it('will have the proper structure with a form', () => {
241 | expect(internals.form).to.equal(form);
242 | });
243 |
244 | it('will be valid by default', () => {
245 | expect(internals.validity.valid).to.be.true;
246 | expect(internals.checkValidity()).to.be.true;
247 | });
248 |
249 | it('will be invalid if the validity has been set to false', () => {
250 | internals.setValidity({
251 | valueMissing: true
252 | }, 'This field is required');
253 |
254 | expect(internals.validity.valid).to.be.false;
255 | expect(internals.checkValidity()).to.be.false;
256 | });
257 |
258 | it('will be valid if toggled back to true from false', () => {
259 | internals.setValidity({
260 | valueMissing: true
261 | }, 'This field is required');
262 |
263 | expect(internals.validity.valid).to.be.false;
264 | expect(internals.checkValidity()).to.be.false;
265 |
266 | internals.setValidity({
267 | valueMissing: false
268 | });
269 |
270 | expect(internals.validity.valid).to.be.true;
271 | expect(internals.checkValidity()).to.be.true;
272 | });
273 |
274 | it('will set the validation message from a call to setValidity', () => {
275 | internals.setValidity({
276 | valueMissing: true
277 | }, 'This field is required');
278 |
279 | expect(internals.validationMessage).to.equal('This field is required');
280 | });
281 |
282 | it('will unset the validation message from a call to setValidity', () => {
283 | internals.setValidity({
284 | valueMissing: true
285 | }, 'This field is required');
286 |
287 | expect(internals.validationMessage).to.equal('This field is required');
288 |
289 | internals.setValidity({ valueMissing: false });
290 | expect(internals.validationMessage).to.equal('');
291 | });
292 |
293 | it('will reset validity if an object literal is passed to setValidity', () => {
294 | internals.setValidity({
295 | valueMissing: true
296 | }, 'This field is required');
297 | expect(internals.validity.valid).to.be.false;
298 | internals.setValidity({});
299 | expect(internals.validity.valid).to.be.true;
300 | });
301 |
302 | it('will throw if setValidity is called with a flag and no validation message', () => {
303 | expect(() => {
304 | internals.setValidity({
305 | valueMissing: true
306 | });
307 | }).to.throw();
308 | });
309 |
310 | it ('will accept ValidityState from a native form input', () => {
311 | el.input.required = true;
312 | el.input.reportValidity();
313 | internals.setValidity(el.input.validity, el.input.validationMessage, el.input);
314 | expect(internals.validity.valueMissing).to.be.true;
315 | });
316 |
317 | it('will return true for willValidate if the field can participate in the form', () => {
318 | expect(internals.willValidate).to.be.true;
319 | });
320 |
321 | it('will return false from willValidate if the field is disabled', async () => {
322 | el.disabled = true;
323 | await elementUpdated(el);
324 | expect(internals.willValidate).to.be.false;
325 | if (ElementInternals.isPolyfilled) {
326 | expect(el.getAttribute('aria-disabled')).to.equal('true');
327 | }
328 | });
329 |
330 | it('will participate in forms', async () => {
331 | el.value = 'testing';
332 | expect(new FormData(form).get('foo')).to.equal('testing');
333 | });
334 |
335 | it('will respond to name changes', async () => {
336 | el.value = 'testing';
337 | const formData = new FormData(form);
338 | expect(formData.get('xyz')).to.equal(null);
339 | expect(formData.get('foo')).to.equal('testing');
340 | el.setAttribute('name', 'xyz');
341 | await aTimeout(0);
342 | const newFormData = new FormData(form);
343 | expect(newFormData.get('xyz')).to.equal('testing');
344 | expect(newFormData.get('foo')).to.equal(null);
345 | });
346 |
347 | it('will trigger the formDisabledCallback when disabled', async () => {
348 | el.disabled = true;
349 | await elementUpdated(el);
350 | // Lifecycle methods are stripped off at definition time
351 | // and added elsewhere so we can't use a spy. Instead
352 | // we're going to look for a side-effect
353 | expect(callCount).to.equal(1);
354 | });
355 |
356 | it('will respond to form reset events', async () => {
357 | form.reset();
358 | // Lifecycle methods are stripped off at definition time
359 | // and added elsewhere so we can't use a spy. Instead
360 | // we're going to look for a side-effect
361 | expect(callCount).to.equal(2);
362 | });
363 |
364 | it('will cancel form submission if invalid', (done) => {
365 | el.addEventListener('invalid', event => {
366 | expect(event).to.exist;
367 | done();
368 | });
369 | internals.setValidity({
370 | valueMissing: true
371 | }, 'This field is required');
372 | button.click();
373 | });
374 |
375 | it('will wire up labels', async () => {
376 | expect([...internals.labels]).to.deep.equal([label]);
377 | });
378 |
379 | it('will dispatch an invalid event on checkValidity if invalid', (done) => {
380 | el.addEventListener('invalid', event => {
381 | expect(event).to.exist;
382 | done();
383 | });
384 | internals.setValidity({
385 | valueMissing: true
386 | }, 'This field is required');
387 | el.internals.checkValidity();
388 | });
389 |
390 | it('will call formAssociatedCallback after internals have been set', () => {
391 | expect(internalsAvailableInFormAssociatedCallback).to.be.true;
392 | });
393 |
394 | it('will not include null values set via setFormValue', () => {
395 | internals.setFormValue('test');
396 | internals.setFormValue(null);
397 | const output = new FormData(form);
398 | expect(Array.from(output.keys()).length).to.equal(0);
399 | });
400 |
401 | it('will not include undefined values set via setFormValue', () => {
402 | internals.setFormValue('test');
403 | internals.setFormValue(undefined);
404 | const output = new FormData(form);
405 | expect(Array.from(output.keys()).length).to.equal(0);
406 | });
407 |
408 | it('will include multiple form values passed via FormData to setFormValue', () => {
409 | let input;
410 | let output;
411 | input = new FormData();
412 | input.set('first', '1');
413 | input.set('second', '2');
414 | input.append('second', '22'); // Multi-value keys should also work
415 | internals.setFormValue(input);
416 | output = new FormData(form);
417 | expect(Array.from(output.values()).length).to.equal(3);
418 | expect(output.get('first')).to.equal('1');
419 | expect(output.getAll('second').length).to.equal(2);
420 | input = new FormData();
421 | input.set('override', '3');
422 | internals.setFormValue(input);
423 | output = new FormData(form);
424 | expect(Array.from(output.keys()).length).to.equal(1);
425 | expect(output.get('override')).to.equal('3');
426 | });
427 |
428 | it('will not include form values from elements without a name', () => {
429 | noname.internals.setFormValue('noop');
430 | const output = new FormData(form);
431 | expect(Array.from(output.keys()).length).to.equal(0);
432 | });
433 |
434 | it('will include form values from elements without a name if set with FormData', () => {
435 | const formData = new FormData();
436 | formData.set('formdata', 'works');
437 | noname.internals.setFormValue(formData);
438 | const output = new FormData(form);
439 | expect(Array.from(output.keys()).length).to.equal(1);
440 | expect(output.get('formdata')).to.equal('works');
441 | });
442 |
443 | it('will append FormData in correct order', () => {
444 | const formData = new FormData();
445 | formData.append('one', '1')
446 | formData.append('two', '2')
447 | noname.internals.setFormValue(formData);
448 | const output = new FormData(form);
449 |
450 | expect(Array.from(output.keys())).to.eql(['one', 'two'])
451 | });
452 |
453 | it('saves a reference to all shadow roots', () => {
454 | expect(internals.shadowRoot).to.equal(el.shadowRoot);
455 | });
456 |
457 | it('will focus the element if validated with anchor', async () => {
458 | internals.setValidity({
459 | customError: true
460 | }, 'Error message', el.input);
461 | internals.reportValidity();
462 | expect(document.activeElement).to.equal(el);
463 | });
464 |
465 | it('will focus anchor elements in document order on form submission failure', () => {
466 | internals.setValidity({
467 | customError: true
468 | }, 'Error message', el.input);
469 | noname.internals.setValidity({
470 | customError: true
471 | }, 'Error message', noname.input);
472 | button.click();
473 | expect(document.activeElement).to.equal(el);
474 | });
475 |
476 | it('will accept non strings', async () => {
477 | internals.setFormValue(['a', 'b']);
478 | expect(
479 | new FormData(internals.form).get('foo')
480 | ).to.equal('a,b');
481 | });
482 |
483 | it('will accept empty strings', () => {
484 | internals.setFormValue('');
485 | expect(new FormData(internals.form).get('foo')).to.equal('');
486 | });
487 |
488 | it('will set the form to the proper validity state', async () => {
489 | internals.setValidity({ valueMissing: true }, 'Error message');
490 | expect(form.checkValidity()).to.be.false;
491 | expect(form.reportValidity()).to.be.false;
492 |
493 | internals.setValidity({});
494 | expect(form.checkValidity()).to.be.true;
495 | expect(form.reportValidity()).to.be.true;
496 | });
497 | });
498 |
499 | describe('closed shadow root element', () => {
500 | let shadowRoot;
501 | let el;
502 | let internals;
503 |
504 | class ClosedRoot extends HTMLElement {
505 | constructor() {
506 | super();
507 | shadowRoot = this.attachShadow({ mode: 'closed' });
508 | this.internals = this.attachInternals();
509 | }
510 | }
511 |
512 | customElements.define('closed-root', ClosedRoot);
513 |
514 | beforeEach(async () => {
515 | el = await fixture(html``);
516 | internals = el.internals;
517 | });
518 |
519 | afterEach(async () => {
520 | await fixtureCleanup(el);
521 | });
522 |
523 | it('maintains a reference to closed shadow roots', () => {
524 | expect(internals.shadowRoot).to.equal(shadowRoot);
525 | });
526 | });
527 |
528 | describe('Forms with onsubmit', () => {
529 | let form;
530 | let el;
531 | let internals;
532 | let button;
533 |
534 | beforeEach(async () => {
535 | form = await fixture(html``);
539 | el = form.querySelector('test-el');
540 | internals = el.internals;
541 | button = form.querySelector('button');
542 | callCount = 0;
543 | });
544 |
545 | it('will not call onsubmit if invalid', async () => {
546 | expect(callCount).to.equal(0);
547 | internals.setValidity({ valueMissing: true }, 'Error message');
548 | button.click();
549 | expect(callCount).to.equal(0);
550 | });
551 |
552 | it('will call onsubmit if valid', async () => {
553 | expect(callCount).to.equal(0);
554 | internals.setValidity({});
555 | button.click();
556 | expect(callCount).to.equal(1);
557 | });
558 | });
559 |
560 | describe('Forms with novalidate', () => {
561 | it('will not block submit', async () => {
562 | let submitCount = 0;
563 | const onSubmit = (event) => {
564 | event.preventDefault();
565 | submitCount += 1;
566 | }
567 | const form = await fixture(html``);
571 | const testEl = form.querySelector('test-el');
572 | const button = form.querySelector('button');
573 | testEl.internals.setValidity({
574 | customError: true
575 | }, 'error message');
576 | button.click();
577 | expect(submitCount).to.equal(1);
578 | });
579 | });
580 |
581 | describe('forms outside closed custom elements', () => {
582 | it('will not find forms outside of closed custom element', async () => {
583 | class ClosedElementWithCustomFormElement extends HTMLElement {
584 | constructor() {
585 | super();
586 | this.renderRoot = this.attachShadow({ mode: 'closed' });
587 | this.renderRoot.innerHTML = ``;
588 | }
589 | }
590 | customElements.define('closed-element-with-custom-form-element', ClosedElementWithCustomFormElement);
591 |
592 | const form = await fixture(html``);
595 | const shadowElement = form.querySelector('closed-element-with-custom-form-element');
596 | const testEl = shadowElement.renderRoot.querySelector("test-el")
597 | expect(testEl.internals.form).to.be.null;
598 | });
599 | });
600 |
601 | describe('disabled custom element', () => {
602 | class DisabledElement extends HTMLElement {
603 | static formAssociated = true;
604 |
605 | order = [];
606 |
607 | constructor() {
608 | super();
609 |
610 | this.attachShadow({ mode: 'open' });
611 | this.attachInternals();
612 |
613 | this.order.push('constructor');
614 | }
615 |
616 | connectedCallback() {
617 | this.order.push('connectedCallback');
618 | }
619 |
620 | disconnectedCallback() {
621 | this.order.push('disconnectedCallback');
622 | }
623 |
624 | formDisabledCallback() {
625 | this.order.push('formDisabledCallback');
626 | }
627 | }
628 |
629 | customElements.define('test-disabled', DisabledElement);
630 |
631 | let el;
632 |
633 | beforeEach(async () => {
634 | el = await fixture(html``);
635 | });
636 |
637 | it('should have called the callbacks in the correct order', async () => {
638 | await el.updateComplete;
639 |
640 | expect(el.order).to.eql(['constructor', 'formDisabledCallback', 'connectedCallback']);
641 | });
642 |
643 | it('should only call formDisabledCallback once', async () => {
644 | await el.updateComplete;
645 |
646 | const container = el.parentElement;
647 | container.removeChild(el);
648 | container.appendChild(el);
649 |
650 | expect(el.order).to.eql([
651 | 'constructor',
652 | 'formDisabledCallback',
653 | 'connectedCallback',
654 | 'disconnectedCallback',
655 | 'connectedCallback'
656 | ]);
657 | });
658 | });
659 | });
660 |
--------------------------------------------------------------------------------
/test/FormElements.test.ts:
--------------------------------------------------------------------------------
1 | import { expect, fixture, html } from '@open-wc/testing';
2 | import '../dist/index.js';
3 | class TestInput extends HTMLElement {
4 | static formAssociated = true;
5 | internals = this.attachInternals();
6 | }
7 |
8 | customElements.define('test-input', TestInput);
9 |
10 | class TestDummy extends HTMLElement {
11 | }
12 |
13 |
14 | customElements.define('test-dummy', TestDummy);
15 | class TestFormAssociatedNoAttachInternals extends HTMLElement {
16 | static formAssociated = true;
17 | }
18 | customElements.define('test-no-attach-internals', TestFormAssociatedNoAttachInternals);
19 |
20 | async function createForm(): Promise {
21 | return await fixture(html`
22 | `);
31 | }
32 |
33 | it('must contains the custom elements associated to the current form, in the correct order', async () => {
34 | const form = await createForm();
35 | expect(form.elements).to.have.length(6);
36 |
37 | expect(form.elements[0]).to.be.an.instanceof(HTMLInputElement);
38 | expect(form.elements[1]).to.be.an.instanceof(TestInput);
39 | expect(form.elements[2]).to.be.an.instanceof(TestInput);
40 | expect(form.elements[3]).to.be.an.instanceof(TestInput);
41 | expect(form.elements[4]).to.be.an.instanceof(HTMLButtonElement);
42 | expect(form.elements[5]).to.be.an.instanceof(TestFormAssociatedNoAttachInternals);
43 |
44 | expect(form.elements[0].id).to.equal('foo');
45 | expect(form.elements[1].id).to.equal('ti1');
46 | expect(form.elements[2].id).to.equal('ti2');
47 | expect(form.elements[3].id).to.equal('ti3');
48 |
49 | expect(form.elements.namedItem('foo')).to.be.an.instanceof(HTMLInputElement);
50 | expect(form.elements.namedItem('first')).to.be.an.instanceof(TestInput);
51 | expect(form.elements.namedItem('avoid-me')).to.be.null;
52 | expect(form.elements.namedItem('second')).to.be.an.instanceof(TestInput);
53 | expect(form.elements.namedItem('third')).to.be.an.instanceof(TestInput);
54 | });
55 |
--------------------------------------------------------------------------------
/test/fieldset.test.ts:
--------------------------------------------------------------------------------
1 | import {
2 | aTimeout,
3 | expect,
4 | fixture,
5 | fixtureCleanup,
6 | html,
7 | } from '@open-wc/testing';
8 | import '../dist/index.js';
9 |
10 | let formDisabledCallbackCalled = false;
11 | class FieldsetTestElement extends HTMLElement {
12 | static formAssociated = true;
13 | internals = this.attachInternals();
14 |
15 | formDisabledCallback() {
16 | formDisabledCallbackCalled = true;
17 | }
18 | }
19 |
20 | customElements.define('fieldset-test-element', FieldsetTestElement);
21 | interface FieldsetTestElementFixtureConfig {
22 | disabled?: boolean;
23 | }
24 |
25 | async function createFieldset({ disabled }: FieldsetTestElementFixtureConfig = {}): Promise {
26 | return await fixture(html``);
30 | }
31 |
32 | describe('Internals behaviors with fieldset', () => {
33 | afterEach(fixtureCleanup);
34 | afterEach(() => {
35 | formDisabledCallbackCalled = false;
36 | });
37 |
38 | it('will trigger the formDisabledCallback of a nested component when the fieldset is disabled', async () => {
39 | const fieldset = await createFieldset();
40 | expect(formDisabledCallbackCalled).to.be.false;
41 | fieldset.disabled = true;
42 | await aTimeout(0);
43 | expect(formDisabledCallbackCalled).to.be.true;
44 | });
45 |
46 | it('will trigger the formDisabledCallback of a nested component when the fieldset is disabled on first render', async () => {
47 | await createFieldset({
48 | disabled: true
49 | });
50 | expect(formDisabledCallbackCalled).to.be.true;
51 | });
52 | });
53 |
--------------------------------------------------------------------------------
/test/lit-ssr.test.ts:
--------------------------------------------------------------------------------
1 | import '../dist/index.js';
2 |
3 | import { cleanupFixtures, ssrFixture } from '@lit-labs/testing/fixtures.js';
4 | import { expect } from '@open-wc/testing';
5 | import { LitElement, html } from 'lit';
6 |
7 | class SsrTestEl extends LitElement {
8 | internals = this.attachInternals();
9 | constructor() {
10 | super();
11 | this.internals.role = 'widget';
12 | }
13 | }
14 |
15 | customElements.define('ssr-test-el', SsrTestEl);
16 |
17 | describe('The polyfill on the server', () => {
18 | afterEach(cleanupFixtures);
19 |
20 | it('should not throw', async () => {
21 | const el = await ssrFixture(html``, {
22 | hydrate: false,
23 | modules: ['../dist/index.js', './ssr-test-el.js']
24 | });
25 |
26 | expect(el.internals).to.exist;
27 | if (ElementInternals['isPolyfilled'] === true) {
28 | expect(el.getAttribute('role')).to.equal('widget');
29 | }
30 | });
31 | });
32 |
--------------------------------------------------------------------------------
/test/polyfilledBrowsers.test.js:
--------------------------------------------------------------------------------
1 | import {
2 | aTimeout,
3 | expect,
4 | fixture,
5 | fixtureCleanup,
6 | html,
7 | } from '@open-wc/testing';
8 | import '../dist/index.js';
9 |
10 | describe('ElementInternals polyfill behavior', () => {
11 | describe('accessibility object model', () => {
12 | let el, internals;
13 |
14 | class AomTest extends HTMLElement {
15 | constructor() {
16 | super();
17 | this.internals = this.attachInternals();
18 | this.internals.ariaHidden = true;
19 | }
20 | }
21 |
22 | customElements.define('aom-test', AomTest);
23 |
24 | beforeEach(async () => {
25 | el = await fixture(html``);
26 | internals = el.internals;
27 | });
28 |
29 | afterEach(async () => {
30 | await fixtureCleanup(el);
31 | });
32 |
33 | it('will add aria attributes if polyfilled', () => {
34 | if (ElementInternals.isPolyfilled) {
35 | expect(el.getAttribute('aria-hidden')).to.equal('true');
36 | }
37 | });
38 |
39 | it('will modify aria attributes if polyfilled', () => {
40 | internals.ariaHidden = false;
41 | if (ElementInternals.isPolyfilled) {
42 | expect(el.getAttribute('aria-hidden')).to.equal('false');
43 | }
44 | });
45 | });
46 |
47 | describe('form associated behavior', () => {
48 | let form;
49 | let label;
50 | let el;
51 | let internals;
52 |
53 | class FormAssociated extends HTMLElement {
54 | static get formAssociated() {
55 | return true;
56 | }
57 |
58 | constructor() {
59 | super();
60 | this.internals = this.attachInternals();
61 | }
62 |
63 | connectedCallback() {
64 | this.tabIndex = -1;
65 | const root = this.attachShadow({ mode: 'open' });
66 | root.innerHTML = ``;
67 | this.input = root.querySelector('input');
68 | }
69 | }
70 |
71 | class ValidateInConstructor extends FormAssociated {
72 | constructor() {
73 | super();
74 | this.internals.setValidity({ valueMissing: true }, 'Test');
75 | }
76 | }
77 |
78 | customElements.define('form-associated', FormAssociated);
79 | customElements.define('validate-in-constructor', ValidateInConstructor);
80 |
81 | beforeEach(async () => {
82 | form = await fixture(html``);
86 | label = form.querySelector('label');
87 | el = form.querySelector('form-associated');
88 | internals = el.internals;
89 | });
90 |
91 | afterEach(async () => await fixtureCleanup(form));
92 |
93 | it('will set the aria atttributes on label', async () => {
94 | expect(internals.labels.length).to.equal(1);
95 | expect(Array.from(internals.labels)).to.deep.equal([label]);
96 | });
97 |
98 | it('will toggle the internals-disabled attribute when disabled is set', async () => {
99 | if (ElementInternals.isPolyfilled) {
100 | el.setAttribute('disabled', true);
101 | el.disabled = true;
102 | await aTimeout();
103 | expect(el.hasAttribute('internals-disabled')).to.be.true;
104 | el.toggleAttribute('disabled', false);
105 | await aTimeout();
106 | expect(el.hasAttribute('internals-disabled')).to.be.false;
107 | }
108 | });
109 |
110 | it('will reflect internals.role', async () => {
111 | if (ElementInternals.isPolyfilled) {
112 | el.internals.role = 'button';
113 | await aTimeout();
114 | expect(el.getAttribute('role')).to.equal('button');
115 | }
116 | });
117 |
118 | it('will not throw and will upgrade if constructed using document.createElement', async () => {
119 | let el;
120 | expect(() => {
121 | el = document.createElement('validate-in-constructor');
122 | }).not.to.throw();
123 | document.body.append(el);
124 | await aTimeout(0);
125 | if (ElementInternals.isPolyfilled) {
126 | expect(el.getAttribute('internals-valid')).to.equal('false');
127 | expect(el.getAttribute('internals-invalid')).to.equal('true');
128 | }
129 | });
130 | });
131 |
132 | describe('CustomStateSet', () => {
133 | let el;
134 | let states;
135 |
136 | class StateSetElement extends HTMLElement {
137 | constructor() {
138 | super();
139 |
140 | this.internals = this.attachInternals();
141 | }
142 | }
143 |
144 | customElements.define('state-set-element', StateSetElement);
145 |
146 | beforeEach(async () => {
147 | el = await fixture(html``);
148 | console.log({el})
149 | states = el.internals.states;
150 | });
151 | });
152 | });
153 |
--------------------------------------------------------------------------------
/test/ssr-test-el.js:
--------------------------------------------------------------------------------
1 | import { LitElement } from 'lit';
2 |
3 | export class SsrTestEl extends LitElement {
4 | constructor() {
5 | super();
6 | this.internals = this.attachInternals();
7 | this.internals.role = 'widget';
8 | }
9 | }
10 |
11 | export const tagName = 'ssr-test-el'
12 | customElements.define(tagName, SsrTestEl);
13 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "allowJs": true,
4 | "target": "ES2021",
5 | "declaration": true,
6 | "declarationDir": "dist",
7 | "outDir": "dist",
8 | "rootDir": "src",
9 | "moduleResolution": "Node"
10 | },
11 | "lib": ["dom", "ESNext"],
12 | "include": ["./src/**/*"],
13 | "exclude": ["node_modules", "dist"]
14 | }
15 |
--------------------------------------------------------------------------------
/web-test-runner.config.mjs:
--------------------------------------------------------------------------------
1 | import { litSsrPlugin } from '@lit-labs/testing/web-test-runner-ssr-plugin.js';
2 | import { esbuildPlugin } from '@web/dev-server-esbuild';
3 |
4 | export default {
5 | plugins: [
6 | litSsrPlugin(),
7 | esbuildPlugin({ ts: true, target: 'auto' })
8 | ],
9 | };
10 |
--------------------------------------------------------------------------------