Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Signal value update overwrites css-scope-inline style block of html #28

Open
eboody opened this issue May 31, 2024 · 0 comments
Open

Signal value update overwrites css-scope-inline style block of html #28

eboody opened this issue May 31, 2024 · 0 comments

Comments

@eboody
Copy link

eboody commented May 31, 2024

Description:

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.

To include preact/signals-core in your project you can use this html file which contains a script tag and the compiled preact/signals-core JS code:
https://github.com/eboody/app-template/blob/main/crates/services/web-server/src/templates/modules/signals.html

@eboody eboody changed the title Signal value update overwrites script and style blocks Signal value update overwrites script and style blocks of html loaded in with HTMX May 31, 2024
@eboody eboody changed the title Signal value update overwrites script and style blocks of html loaded in with HTMX Signal value update overwrites css-scope-inline style block of html May 31, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant