Add inherited attrs to observedAttributes

Author: alexpdraper

src/attr.ts

@@ -35,7 +35,7 @@ export function attr<K extends string>(proto: Record<K, attrValue>, key: K): voi
  * `@controller` decorator it should not call this manually.
  */
 export function initializeAttrs(instance: HTMLElement, names?: Iterable<string>): void {
-  if (!names) names = getAttrNames(instance)
+  if (!names) names = getAttrNames(Object.getPrototypeOf(instance))
   for (const key of names) {
     const value = (<Record<PropertyKey, unknown>>(<unknown>instance))[key]
     const name = attrToAttributeName(key)
@@ -73,16 +73,17 @@ export function initializeAttrs(instance: HTMLElement, names?: Iterable<string>)
   }
 }
 
-function getAttrNames(instance: HTMLElement): Set<string> {
-  let names: string[] = []
-  let proto = Object.getPrototypeOf(instance)
+function getAttrNames(classObjectProto: Record<PropertyKey, unknown>): Set<string> {
+  const names: Set<string> = new Set()
+  let proto: Record<PropertyKey, unknown> | typeof HTMLElement = classObjectProto
 
   while (proto && proto !== HTMLElement) {
-    names = names.concat(attrs.get(proto) || [])
+    const attrNames = attrs.get(<Record<PropertyKey, unknown>>proto) || []
+    for (const name of attrNames) names.add(name)
     proto = Object.getPrototypeOf(proto)
   }
 
-  return new Set(names)
+  return names
 }
 
 function attrToAttributeName(name: string): string {
@@ -93,9 +94,8 @@ export function defineObservedAttributes(classObject: CustomElement): void {
   let observed = classObject.observedAttributes || []
   Object.defineProperty(classObject, 'observedAttributes', {
     get() {
-      const attrMap = attrs.get(classObject.prototype)
-      if (!attrMap) return observed
-      return attrMap.map(attrToAttributeName).concat(observed)
+      const attrMap = getAttrNames(classObject.prototype)
+      return [...attrMap].map(attrToAttributeName).concat(observed)
     },
     set(attributes: string[]) {
       observed = attributes

test/attr.js

@@ -218,4 +218,12 @@ describe('defineObservedAttributes', () => {
     TestElement.observedAttributes = ['a', 'b', 'c']
     expect(TestElement.observedAttributes).to.eql(['data-foo', 'a', 'b', 'c'])
   })
+
+  it('will reflect values from extended elements', () => {
+    class TestElement extends HTMLElement {}
+    class ExtendedTestElement extends TestElement {}
+    defineObservedAttributes(ExtendedTestElement)
+    attr(TestElement.prototype, 'foo')
+    expect(ExtendedTestElement.observedAttributes).to.eql(['data-foo'])
+  })
 })