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.

Sign up for GitHub

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

Jump to bottom

Invalid shadow DOM crashes chromedriver #6

Closed
johncalvinyoung opened this issue Jun 28, 2024 · 2 comments · Fixed by #7
Closed

Invalid shadow DOM crashes chromedriver #6

johncalvinyoung opened this issue Jun 28, 2024 · 2 comments · Fixed by #7
Assignees
@rektdeckard
Labels
bug Something isn't working

Comments

@johncalvinyoung
Copy link

johncalvinyoung commented Jun 28, 2024 •
edited
Loading

Describe the bug

A <slot> element is not a valid child of a <svg> element, and crashes Chromedriver when asked for the text of the page.

Steps to Reproduce

Using capybara -> selenium-webdriver -> chromedriver...

<html>
  <body>
    <ph-trash><ph-trash>
    <div>foobar</div>
  </body>
</html>
visit 'index.html'
expect(page).to have_content 'foobar'

Expected behavior

does not crash. Capybara's have_content selector eventually ends up asking Selenium for the text content of the page.

Screenshots

     Failure/Error: expect(page).to have_content 'foobar'
     
     Selenium::WebDriver::Error::JavascriptError:
       javascript error: a.assignedNodes is not a function
         (Session info: chrome-headless-shell=126.0.6478.127)
     
     # 0   chromedriver                        0x00000001026eaa80 chromedriver + 4385408
     # 1   chromedriver                        0x00000001026e338c chromedriver + 4354956
     # 2   chromedriver                        0x0000000102300b0c chromedriver + 281356
     # 3   chromedriver                        0x0000000102304fd8 chromedriver + 298968
     # 4   chromedriver                        0x0000000102306e58 chromedriver + 306776
     # 5   chromedriver                        0x0000000102306ed0 chromedriver + 306896
     # 6   chromedriver                        0x000000010233e2a0 chromedriver + 533152
     # 7   chromedriver                        0x0000000102339734 chromedriver + 513844
     # 8   chromedriver                        0x000000010237bd24 chromedriver + 785700
     # 9   chromedriver                        0x0000000102337eec chromedriver + 507628
     # 10  chromedriver                        0x00000001023388c4 chromedriver + 510148
     # 11  chromedriver                        0x00000001026b243c chromedriver + 4154428
     # 12  chromedriver                        0x00000001026b6ea0 chromedriver + 4173472
     # 13  chromedriver                        0x0000000102697ff8 chromedriver + 4046840
     # 14  chromedriver                        0x00000001026b778c chromedriver + 4175756
     # 15  chromedriver                        0x000000010268afb8 chromedriver + 3993528
     # 16  chromedriver                        0x00000001026d521c chromedriver + 4297244
     # 17  chromedriver                        0x00000001026d5398 chromedriver + 4297624
     # 18  chromedriver                        0x00000001026e2f84 chromedriver + 4353924
     # 19  libsystem_pthread.dylib             0x0000000197c52f94 _pthread_start + 136
     # 20  libsystem_pthread.dylib             0x0000000197c4dd34 thread_start + 8
     # ./spec/system/[...]_spec.rb:56:in `block (3 levels) in <top (required)>'

Context (please complete the following information):

Additional notes:

  • confirmed by copying the shadow-dom of ph-trash into my own component (also using Lit). Crash continued. Removing the <slot> fixed the crash. Moving the <slot> outside of the <svg> element fixed the crash.
  • Near as I can tell, the assignedNodes is part of the HTMLSlotElement specification, so a <slot> in <svg> is recognized by one part of the browser but not up-fit to HTMLSlotElement, leading to the crash.
@johncalvinyoung johncalvinyoung added the bug Something isn't working label Jun 28, 2024
@rektdeckard
Copy link
Member

Thanks for the report! I imagine this can be escaped by wrapping it in a <foreignObject> tag to revert to HTML namespace, but will experiment with it.

@rektdeckard
Copy link
Member

rektdeckard commented Jun 29, 2024 •
edited
Loading

It appears to work, but as we are back in the HTML namespace, the wrapping <svg> tag is needed, I.E.

<ph-acorn size="48">
    <svg width="100%" height="100%">
        <circle cx="50%" cy="50%" r="25%"/>
    </svg>
</ph-acorn>

There is no way to slot SVG namespaced elements in a shadow DOM. And this is starting to be a lot more awkward than simply stacking layers manually with CSS. I think I'll just nix the feature from this library, since it never worked to begin with.

@rektdeckard rektdeckard mentioned this issue Jun 29, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@rektdeckard rektdeckard

Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(lib): remove <slot> as it does not work with SVG namespace phosphor-icons/webcomponents
2 participants
@johncalvinyoung @rektdeckard