feat: reflect custom states as shadow parts in addition to attributes

Fixes #62

Author: tbroyer

Diff for: src/CustomStateSet.ts

@@ -20,6 +20,9 @@ export class CustomStateSet extends Set<string> {
     const result = super.add(state);
     const ref = customStateMap.get(this);
     ref.toggleAttribute(`state${state}`, true);
+    if (ref.part) {
+      ref.part.add(`state--${state}`);
+    }
     return result;
   }
 
@@ -34,6 +37,9 @@ export class CustomStateSet extends Set<string> {
     const result = super.delete(state);
     const ref = customStateMap.get(this);
     ref.toggleAttribute(`state${state}`, false);
+    if (ref.part) {
+      ref.part.remove(`state--${state}`);
+    }
     return result;
   }
 }

Diff for: test/CustomStateSet.test.ts

@@ -15,28 +15,45 @@ describe('CustomStateSet polyfill', () => {
     fixtureCleanup();
   });
 
-  describe('it will add attributes', async () => {
+  describe('it will add attributes and parts', async () => {
     set.add('--foo');
     expect(el.hasAttribute('state--foo')).to.be.true;
+    if (el.part) {
+      expect(el.part.contains('state--foo')).to.be.true;
+    }
   });
 
-  describe('it will remove attributes', async () => {
+  describe('it will remove attributes and parts', async () => {
     set.add('--foo');
     expect(el.hasAttribute('state--foo')).to.be.true;
+    if (el.part) {
+      expect(el.part.contains('state--foo')).to.be.true;
+    }
 
     set.delete('--foo');
     expect(el.hasAttribute('state--foo')).to.be.false;
+    if (el.part) {
+      expect(el.part.contains('state--foo')).to.be.false;
+    }
   });
 
-  describe('it will clear all attributes', async () => {
+  describe('it will clear all attributes and parts', async () => {
     set.add('--foo');
     set.add('--bar');
 
     expect(el.hasAttribute('state--foo')).to.be.true;
     expect(el.hasAttribute('state--bar')).to.be.true;
+    if (el.part) {
+      expect(el.part.contains('state--foo')).to.be.true;
+      expect(el.part.contains('state--bar')).to.be.true;
+    }
 
     set.clear();
     expect(el.hasAttribute('state--foo')).to.be.false;
     expect(el.hasAttribute('state--bar')).to.be.false;
+    if (el.part) {
+      expect(el.part.contains('state--foo')).to.be.false;
+      expect(el.part.contains('state--bar')).to.be.false;
+    }
   });
 });