@@ -12,73 +12,68 @@ import {customElement} from 'lit/decorators.js';
1212import { hasState , mixinCustomStateSet , toggleState } from './custom-state-set.js' ;
1313import { mixinElementInternals } from './element-internals.js' ;
1414
15+ // A more reliable test would use `forceElementInternalsPolyfill()` from
16+ // `element-internals-polyfill`, but our GitHub test build doesn't
17+ // support it since the polyfill changes global types.
18+
19+ /* A simplified version of element-internals-polyfill CustomStateSet. */
20+ class PolyfilledCustomStateSet extends Set < string > {
21+ constructor ( private readonly ref : HTMLElement ) {
22+ super ( ) ;
23+ }
24+
25+ override add ( state : string ) {
26+ if ( ! / ^ - - / . test ( state ) || typeof state !== 'string' ) {
27+ throw new DOMException (
28+ `Failed to execute 'add' on 'CustomStateSet': The specified value ${ state } must start with '--'.` ,
29+ ) ;
30+ }
31+ const result = super . add ( state ) ;
32+ this . ref . toggleAttribute ( `state${ state } ` , true ) ;
33+ return result ;
34+ }
35+
36+ override clear ( ) {
37+ for ( const [ entry ] of this . entries ( ) ) {
38+ this . delete ( entry ) ;
39+ }
40+ super . clear ( ) ;
41+ }
42+
43+ override delete ( state : string ) {
44+ const result = super . delete ( state ) ;
45+ this . ref . toggleAttribute ( `state${ state } ` , false ) ;
46+ return result ;
47+ }
48+ }
49+
1550@customElement ( 'test-custom-state-set' )
1651class TestCustomStateSet extends mixinCustomStateSet (
1752 mixinElementInternals ( LitElement ) ,
18- ) { }
53+ ) {
54+ static testWithPolyfill = false ;
55+
56+ override attachInternals ( ) {
57+ const internals = super . attachInternals ( ) ;
58+ if ( TestCustomStateSet . testWithPolyfill ) {
59+ Object . defineProperty ( internals , 'states' , {
60+ enumerable : true ,
61+ configurable : true ,
62+ value : new PolyfilledCustomStateSet ( this ) ,
63+ } ) ;
64+ }
65+ return internals ;
66+ }
67+ }
1968
2069for ( const testWithPolyfill of [ false , true ] ) {
2170 const describeSuffix = testWithPolyfill
2271 ? ' (with element-internals-polyfill)'
2372 : '' ;
2473
2574 describe ( `mixinCustomStateSet()${ describeSuffix } ` , ( ) => {
26- const nativeAttachInternals = HTMLElement . prototype . attachInternals ;
27-
2875 beforeAll ( ( ) => {
29- if ( testWithPolyfill ) {
30- // A more reliable test would use `forceElementInternalsPolyfill()` from
31- // `element-internals-polyfill`, but our GitHub test build doesn't
32- // support it since the polyfill changes global types.
33-
34- /* A simplified version of element-internal-polyfill CustomStateSet. */
35- class PolyfilledCustomStateSet extends Set < string > {
36- constructor ( private readonly ref : HTMLElement ) {
37- super ( ) ;
38- }
39-
40- override add ( state : string ) {
41- if ( ! / ^ - - / . test ( state ) || typeof state !== 'string' ) {
42- throw new DOMException (
43- `Failed to execute 'add' on 'CustomStateSet': The specified value ${ state } must start with '--'.` ,
44- ) ;
45- }
46- const result = super . add ( state ) ;
47- this . ref . toggleAttribute ( `state${ state } ` , true ) ;
48- return result ;
49- }
50-
51- override clear ( ) {
52- for ( const [ entry ] of this . entries ( ) ) {
53- this . delete ( entry ) ;
54- }
55- super . clear ( ) ;
56- }
57-
58- override delete ( state : string ) {
59- const result = super . delete ( state ) ;
60- this . ref . toggleAttribute ( `state${ state } ` , false ) ;
61- return result ;
62- }
63- }
64-
65- HTMLElement . prototype . attachInternals = function ( this : HTMLElement ) {
66- const internals = nativeAttachInternals . call ( this ) ;
67- Object . defineProperty ( internals , 'states' , {
68- enumerable : true ,
69- configurable : true ,
70- value : new PolyfilledCustomStateSet ( this ) ,
71- } ) ;
72-
73- return internals ;
74- } ;
75- }
76- } ) ;
77-
78- afterAll ( ( ) => {
79- if ( testWithPolyfill ) {
80- HTMLElement . prototype . attachInternals = nativeAttachInternals ;
81- }
76+ TestCustomStateSet . testWithPolyfill = testWithPolyfill ;
8277 } ) ;
8378
8479 describe ( '[hasState]()' , ( ) => {
0 commit comments