From baf5ead02cfea10f2dae6fa9af56299b359d0d63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Luba=C5=84ski?= <dominik.lubanski@gmail.com>
Date: Fri, 7 May 2021 10:08:16 +0200
Subject: [PATCH] fix(html): use property where possible for combined
 expressions

---
 src/template/core.js | 12 +++++++++++-
 test/spec/html.js    | 12 ++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/template/core.js b/src/template/core.js
index 11abe9f6..003e780c 100644
--- 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
index 9a9d965f..0b264308 100644
--- 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  ");