🗿 Mini jQuery alternative. Dependency-free animations. Locality of Behavior. Use one element or arrays transparently. Pairs with htmx. Vanilla querySelector() but better!
When using preact/signals-core and surreal's companion script css-scope-inline, I encountered an issue where when updating the element's textContent the script and style blocks get overwritten. This only happens when I include a style block in the element. Here is the code to reproduce the issue:
<script>
let mySignal = signal("");
</script>
<div>
sample text
<script>
{
let textElement = me();
effect(() => (textElement.textContent = mySignal.value));
}
</script>
<style>
me {
background-color: red;
}
</style>
</div>
In this setup, when I change the value of the signal (mySignal.value = "some new text";), the script and style blocks get overwritten.
However, if I get the firstChild of the div, this issue does not occur:
<div>
sample text
<script>
{
let textElement = me().firstChild;
effect(() => (textElement.textContent = mySignal.value));
}
</script>
<style>
me {
background-color: red;
}
</style>
</div>
Steps to Reproduce:
1. Create a signal.
2. Use the signal value to update the textContent of an element inside a div that has a nested style block.
3. Observe that the script and style blocks within the div are overwritten when the signal's value changes.
Expected Behavior:
The script and style blocks of the div should not be overwritten when updating its textContent with the signal's value.
Actual Behavior:
The script and style blocks of the div element are overwritten when the signal's value is updated.
Additional Context:
When logging textElement.textContent both inside and outside the effect, it consistently shows "sample text" as expected.
Description:
When using
preact/signals-core
and surreal's companion scriptcss-scope-inline
, I encountered an issue where when updating the element's textContent the script and style blocks get overwritten. This only happens when I include astyle
block in the element. Here is the code to reproduce the issue:In this setup, when I change the value of the signal (
mySignal.value = "some new text";
), thescript
andstyle
blocks get overwritten.However, if I get the
firstChild
of thediv
, this issue does not occur:Steps to Reproduce:
Expected Behavior:
The
script
andstyle
blocks of thediv
should not be overwritten when updating itstextContent
with the signal's value.Actual Behavior:
The
script
andstyle
blocks of thediv
element are overwritten when the signal's value is updated.Additional Context:
When logging
textElement.textContent
both inside and outside the effect, it consistently shows "sample text" as expected.To include
preact/signals-core
in your project you can use this html file which contains ascript
tag and the compiledpreact/signals-core
JS code: https://github.com/eboody/app-template/blob/main/crates/services/web-server/src/templates/modules/signals.html