search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.21k stars 9.26k forks source link

[Bug]: Inline HTML <script> tags get removed from DOM in rendered story #29275

Open basher opened 1 week ago

basher commented 1 week ago

Describe the bug

I'm creating a new UI component library for an existing web app in Storybook/HTML.

Component HTML contains inline <script> tags, which are getting stripped out of story DOM:

Image

These inline scripts need to be detectable via document.querySelector() inside global script, which are loaded inside preview-head.html.

They're returning null.

Is there a reason why inline scripts get removed from DOM???

Reproduction link

https://github.com/basher/sb-test

Reproduction steps

  1. Load the story from reproduction link.
  2. Scripts executing via preview-head.html cannot find inline script tags inside story DOM.

System

Storybook Environment Info:

System: OS: Windows 10 10.0.19045 CPU: (4) x64 Intel(R) Core(TM) i7-6500U CPU @ 2.50GHz Binaries: Node: 20.11.0 - C:\Program Files\nodejs\node.EXE npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD <----- active Browsers: Chrome: 129.0.6668.90 Edge: Chromium (127.0.2651.74) npmPackages: @storybook/html: ^8.2.3 => 8.3.5 @storybook/html-vite: ^8.2.3 => 8.3.5 storybook: ^8.2.3 => 8.3.5

Additional context

No response

basher commented 6 days ago

The inline <script> tags get moved to a #scripts-root node, so they do actually "execute" whatever is inside them.

However, I need the scripts to remain where they are originally - i.e. inside #storybook-root - so that I can mimic the real behaviour of the web app that I'm Storybooking.