Merge branch 'master' into feat-router

hybridsjs · May 7, 2021 · bebc81d · bebc81d
2 parents 21f472f + baf5ead
commit bebc81d
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/src/template/core.js b/src/template/core.js
@@ -269,6 +269,7 @@ export function compileTemplate(rawParts, isSVG, styles) {
 
               results.forEach((placeholder, index) => {
                 const [, id] = placeholder.match(PLACEHOLDER_REGEXP_EQUAL);
+                let isProp = false;
                 parts[id] = [
                   compileIndex,
                   (host, target, attrValue) => {
@@ -279,7 +280,16 @@ export function compileTemplate(rawParts, isSVG, styles) {
                     );
 
                     if (results.length === 1 || index + 1 === results.length) {
-                      target.setAttribute(name, data[partialName]);
+                      isProp =
+                        isProp ||
+                        (!isSVG &&
+                          !(target instanceof SVGElement) &&
+                          name in target);
+                      if (isProp) {
+                        target[name] = data[partialName];
+                      } else {
+                        target.setAttribute(name, data[partialName]);
+                      }
                       data[partialName] = undefined;
                     }
                   },

diff --git a/test/spec/html.js b/test/spec/html.js
@@ -132,6 +132,18 @@ describe("html:", () => {
       );
     });
 
+    it("sets property", () => {
+      define("test-html-computed-property", {
+        value: "",
+      });
+      html`
+        <test-html-computed-property
+          value="asd-${"test"}-${"other"}"
+        ></test-html-computed-property>
+      `({}, fragment);
+      expect(fragment.children[0].value).toBe("asd-test-other");
+    });
+
     it("does not set undefined value", () => {
       render()({}, fragment);
       expect(fragment.children[0].getAttribute("class")).toBe("class-one  ");