resolve prop/attr conflict

package.json

@@ -1,6 +1,6 @@
 {
   "name": "minicomp",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Minimalistic library for creating Web Components",
   "main": "dist/commonjs/index.js",
   "module": "dist/es/index.js",
@@ -51,7 +51,7 @@
     "jest-environment-jsdom": "^29.3.1",
     "jsdom": "^21.1.0",
     "quel": "^0.3.2",
-    "rehtm": "^0.3.2",
+    "rehtm": "^0.4.0",
     "sleep-promise": "^9.1.0",
     "ts-inference-check": "^0.2.1",
     "ts-jest": "^29.0.3",

src/component.ts

@@ -101,8 +101,12 @@ export function component(
     }
 
     override setAttribute(name: string, value: string): void {
-      super.setAttribute(name, value)
-      this._attributeChanged && this._attributeChanged(name, value, this)
+      if (name in this._props) {
+        this.setProperty(name, value)
+      } else {
+        super.setAttribute(name, value)
+        this._attributeChanged && this._attributeChanged(name, value, this)
+      }
     }
 
     override removeAttribute(qualifiedName: string): void {
@@ -111,6 +115,10 @@ export function component(
     }
 
     setProperty(name: string, value: unknown) {
+      if (this.hasAttribute(name)) {
+        this.removeAttribute(name)
+      }
+
       super[name] = value
       this._props[name] = value
       this._propertyChanged && this._propertyChanged(name, value, this)

src/test/define.test.ts

@@ -3,6 +3,7 @@ import './polyfill'
 import { JSDOM } from 'jsdom'
 import { template, html } from 'rehtm'
 import { using, define, definable } from '../define'
+import { PropableElement } from '../component'
 
 
 describe(define, () => {
@@ -103,4 +104,24 @@ describe(define, () => {
 
     expect(el.shadowRoot!.innerHTML).toBe('<div>Hellow World!</div>')
   })
+
+  test('properties overtake attributes.', () => {
+    define('def-11', ({ name }) => `<div>Hellow ${name}!</div>`)
+    const el = document.createElement('def-11') as PropableElement
+    el.setAttribute('name', 'World')
+    el.setProperty('name', 'Universe')
+
+    expect(el.hasAttribute('name')).toBe(false)
+    expect(el['name']).toBe('Universe')
+  })
+
+  test('attributes dont overtake properties.', () => {
+    define('def-12', ({ name }) => `<div>Hellow ${name}!</div>`)
+    const el = document.createElement('def-12') as PropableElement
+    el.setProperty('name', 'Universe')
+    el.setAttribute('name', 'World')
+
+    expect(el.hasAttribute('name')).toBe(false)
+    expect(el['name']).toBe('World')
+  })
 })