Invalid shadow DOM crashes chromedriver

johncalvinyoung commented 3 months ago

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.

rektdeckard commented 3 months ago

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 commented 3 months ago

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.

phosphor-icons / webcomponents

Invalid shadow DOM crashes chromedriver #6