Merge branch 'release/v0.15.1'

Author: holtwick

package.json

@@ -1,7 +1,7 @@
 {
   "name": "zeed-dom",
   "type": "module",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "description": "🌱 Lightweight offline DOM",
   "author": {
     "name": "Dirk Holtwick",

src/htmlparser.spec.ts

@@ -54,11 +54,15 @@ background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNv
 height: 100px;">Test</div>`) as VHTMLDocument
     const node = dom.querySelector('#elem')
     expect(node).not.toBeNull()
+    expect(node?.style.length).toEqual(3)
+    expect(node?.style.getPropertyValue('width')).toEqual('200px')
     expect(node?.style).toMatchInlineSnapshot(`
       {
         "background-image": "url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNy41LjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzMTQ3IDIwMDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMxNDcgMjAwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc)",
         "backgroundImage": "url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNy41LjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzMTQ3IDIwMDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMxNDcgMjAwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc)",
+        "getPropertyValue": [Function],
         "height": "100px",
+        "length": 3,
         "width": "200px",
       }
     `)

src/vdom.ts

@@ -351,11 +351,16 @@ interface Attr {
   value: string
 }
 
+export type VElementStyle = Record<string, string> & {
+  get length(): number
+  getPropertyValue: (name: string) => any
+}
+
 export class VElement extends VNodeQuery {
   _originalTagName: string
   _nodeName: string
   _attributes: Record<string, string>
-  _styles: Record<string, string> | undefined
+  _styles: VElementStyle | undefined
   _dataset: Record<string, string> | undefined
 
   get nodeType() {
@@ -429,9 +434,13 @@ export class VElement extends VNodeQuery {
   }
 
   /// See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
-  get style() {
+  get style(): VElementStyle {
     if (this._styles == null) {
-      const styles = Object.assign({}, DEFAULTS[this.tagName.toLowerCase()] || {})
+      // const styles = Object.assign({}, DEFAULTS[this.tagName.toLowerCase()] || {})
+
+      const styles: Record<string, string> = {}
+      let count = 0
+
       const styleString = this.getAttribute('style')
       if (styleString) {
         let m: string[] | null
@@ -441,15 +450,26 @@ export class VElement extends VNodeQuery {
 
         // eslint-disable-next-line no-cond-assign
         while ((m = re.exec(styleString))) {
+          ++count
           const name = m[1]
           const value = m[2].trim()
           styles[name] = value
           styles[toCamelCase(name)] = value
         }
       }
-      this._styles = styles
+      this._styles = {
+        get length(): number {
+          return count
+        },
+        getPropertyValue(name: string) {
+          return styles[name]
+        },
+
+        ...DEFAULTS[this.tagName.toLowerCase()],
+        ...styles,
+      }
     }
-    return this._styles
+    return this._styles!
   }
 
   /// See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset