Check for inherited attrs in initializeAttrs

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 = attrs.get(Object.getPrototypeOf(instance)) || []
+  if (!names) names = new Set(getAttrNames(instance))
   for (const key of names) {
     const value = (<Record<PropertyKey, unknown>>(<unknown>instance))[key]
     const name = attrToAttributeName(key)
@@ -73,6 +73,12 @@ export function initializeAttrs(instance: HTMLElement, names?: Iterable<string>)
   }
 }
 
+function getAttrNames(instance: HTMLElement | typeof HTMLElement): string[] {
+  if (!instance || instance === HTMLElement) return []
+  const proto = Object.getPrototypeOf(instance)
+  return (attrs.get(proto) || []).concat(getAttrNames(proto))
+}
+
 function attrToAttributeName(name: string): string {
   return `data-${name.replace(/([A-Z]($|[a-z]))/g, '-$1')}`.replace(/--/g, '-').toLowerCase()
 }

test/attr.js

@@ -155,11 +155,15 @@ describe('initializeAttrs', () => {
 
 describe('attr', () => {
   class AttrTestElement extends HTMLElement {}
+  attr(AttrTestElement.prototype, 'foo')
+  attr(AttrTestElement.prototype, 'bar')
   window.customElements.define('attr-test-element', AttrTestElement)
 
+  class ExtendedAttrTestElement extends AttrTestElement {}
+  attr(ExtendedAttrTestElement.prototype, 'baz')
+  window.customElements.define('extended-attr-test-element', ExtendedAttrTestElement)
+
   it('populates the "default" list for initializeAttrs', () => {
-    attr(AttrTestElement.prototype, 'foo')
-    attr(AttrTestElement.prototype, 'bar')
     const instance = document.createElement('attr-test-element')
     instance.foo = 'hello'
     initializeAttrs(instance)
@@ -169,6 +173,20 @@ describe('attr', () => {
     expect(instance.getAttribute('data-foo')).to.equal('hello')
     expect(instance.getAttribute('data-bar')).to.equal('')
   })
+
+  it('includes attrs from extended elements', () => {
+    const instance = document.createElement('extended-attr-test-element')
+    instance.bar = 'hello'
+    instance.baz = 'world'
+    initializeAttrs(instance)
+    expect(instance).to.have.property('foo', '')
+    expect(instance).to.have.property('bar', 'hello')
+    expect(instance).to.have.property('baz', 'world')
+    expect(instance.getAttributeNames()).to.eql(['data-baz', 'data-foo', 'data-bar'])
+    expect(instance.getAttribute('data-foo')).to.equal('')
+    expect(instance.getAttribute('data-bar')).to.equal('hello')
+    expect(instance.getAttribute('data-baz')).to.equal('world')
+  })
 })
 
 describe('defineObservedAttributes', () => {