From e93146d61a7db44439eb8a2895dba2fa47140189 Mon Sep 17 00:00:00 2001
From: Jelle De Loecker <jelle@elevenways.be>
Date: Sun, 18 Feb 2024 16:12:40 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Make=20custom=20elements=20use?=
 =?UTF-8?q?=20a=20new=20renderer=20scope=20when=20it's=20being=20rendered?=
 =?UTF-8?q?=20in=20a=20dialog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                         |  1 +
 lib/element/custom_element.js                        |  2 +-
 test/30-renderer.js                                  | 12 ++++++++++++
 test/templates/render_dialog_with_custom_element.hwk |  4 ++++
 4 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 test/templates/render_dialog_with_custom_element.hwk

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7db9d479..0a487e07 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 * Set `data-he-rerendering` attribute while rerendering a custom element
 * Make custom element keep width & height while rerendering
 * Fix server-side `HTMLElement#removeAttribute()` not removing dataset attributes with dashes
+* Make custom elements use a new renderer scope when it's being rendered in a dialog
 
 ## 2.3.16 (2024-02-15)
 
diff --git a/lib/element/custom_element.js b/lib/element/custom_element.js
index 0033aae4..dcf72229 100644
--- a/lib/element/custom_element.js
+++ b/lib/element/custom_element.js
@@ -968,7 +968,7 @@ function renderCustomTemplate(re_render) {
 	    render_vars,
 	    renderer = this.ensureHawkejsRenderer();
 
-	if (this.constructor.use_new_renderer_scope) {
+	if (this.constructor.use_new_renderer_scope || renderer?.dialog_open) {
 		renderer = renderer.createSubRenderer();
 		renderer.scope_id = renderer.getId();
 	}
diff --git a/test/30-renderer.js b/test/30-renderer.js
index fa0cae23..1c541aa2 100644
--- a/test/30-renderer.js
+++ b/test/30-renderer.js
@@ -668,6 +668,18 @@ This is the main content
 		});
 	});
 
+	describe('#makeDialog()', () => {
+		it('should create dialogs', async () => {
+
+			let renderer = hawkejs.createRenderer();
+
+			let html = await renderer.renderHTML('render_dialog_with_custom_element');
+			html = despace(html);
+
+			assertEqualHtml(html, `<print-attribute text="Hello World" he-rendered="1">Hello World </print-attribute>`);
+		});
+	});
+
 	describe('#renderHTML()', function() {
 
 		let devices = [
diff --git a/test/templates/render_dialog_with_custom_element.hwk b/test/templates/render_dialog_with_custom_element.hwk
new file mode 100644
index 00000000..155962ad
--- /dev/null
+++ b/test/templates/render_dialog_with_custom_element.hwk
@@ -0,0 +1,4 @@
+<% makeDialog() %>
+<% addClass('test-dialog-class') %>
+
+<print-attribute text="Hello World"></print-attribute>
\ No newline at end of file