ui-playground icon indicating copy to clipboard operation
ui-playground copied to clipboard

[🐛core]: `style` tag omitted on the root level of html snippet

Open ala-n opened this issue 11 months ago • 0 comments

To Reproduce Steps to reproduce the behavior: Create a snippet with a style tag on top level:

  <style> input { background: green; } <style>
  <input type="text"/>
  <input type="text"/>

or

  <input type="text"/>
   <style> input { background: green; } <style>
  <input type="text"/>

or

  <input type="text"/>
  <input type="text"/>
  <style> input { background: green; } <style>

Observe the result.

Current behavior Style tag is not applied and omitted in the rendering process. (in terms of presented sample inputs are white)

Expected behavior Style tags should not be omitted in the rendering process. (in terms of presented sample inputs are green)

Additional context

  • Nested style tags are not omitted.
  • The omission happens on the HTML parser level (native)
  • Proposed to simpely create pre processor to auto-wrap style tags into <div style="display: none"><style>...</style></div>
  • Some other workarounds may also work - need to test additionally (alternatively check if comments tag fix problem)
  • Consider smart replace to not affect nested style tags

ala-n avatar Mar 22 '24 13:03 ala-n