Allow for listening to turbo events raised from within the Shadow DOM #802

yuki24 · 2022-11-22T07:57:36Z

Fixes #801.

This issue seems to be caused by the fact that events fired from inside the Shadow DOM won't propagate across the shadow DOM boundary into the standard DOM.

Normally, the turbo frame listens to the turbo:click event in the LinkInterceptor:

turbo/src/core/frames/link_interceptor.ts

Line 20 in 27384ec

document.addEventListener("turbo:click", this.linkClicked)

And a link click will fire a turbo:click event that is eventually handled by the turbo frame link interceptor:

turbo/src/core/session.ts

Lines 329 to 333 in 27384ec

    
           return dispatch<TurboClickEvent>("turbo:click", { 
        
             target: link, 
        
             detail: { url: location.href, originalEvent: event }, 
        
             cancelable: true, 
        
           })

However, when the target link is in the shadow DOM, as declared in this PR, the event wouldn't reach the turbo frame link interceptor.

This could be fixed by specifying composed: true, so the event will bubble up regardless of where the element is located.

yuki24 · 2022-11-22T07:58:38Z

src/tests/fixtures/navigation.html

-        }
-      }
-      window.customElements.define('custom-link-element', CustomLinkElement)
-    </script>


Moving this to src/tests/fixtures/test.js since now this is used by two different tests.

src/tests/fixtures/test.js

[![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@hotwired/turbo](https://turbo.hotwired.dev) ([source](https://togithub.com/hotwired/turbo)) | [`7.2.4` -> `7.2.5`](https://renovatebot.com/diffs/npm/@hotwired%2fturbo/7.2.4/7.2.5) | [![age](https://badges.renovateapi.com/packages/npm/@hotwired%2fturbo/7.2.5/age-slim)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://badges.renovateapi.com/packages/npm/@hotwired%2fturbo/7.2.5/adoption-slim)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://badges.renovateapi.com/packages/npm/@hotwired%2fturbo/7.2.5/compatibility-slim/7.2.4)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://badges.renovateapi.com/packages/npm/@hotwired%2fturbo/7.2.5/confidence-slim/7.2.4)](https://docs.renovatebot.com/merge-confidence/) | | [lit](https://lit.dev/) ([source](https://togithub.com/lit/lit)) | [`2.5.0` -> `2.6.1`](https://renovatebot.com/diffs/npm/lit/2.5.0/2.6.1) | [![age](https://badges.renovateapi.com/packages/npm/lit/2.6.1/age-slim)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://badges.renovateapi.com/packages/npm/lit/2.6.1/adoption-slim)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://badges.renovateapi.com/packages/npm/lit/2.6.1/compatibility-slim/2.5.0)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://badges.renovateapi.com/packages/npm/lit/2.6.1/confidence-slim/2.5.0)](https://docs.renovatebot.com/merge-confidence/) | | [sass](https://togithub.com/sass/dart-sass) | [`1.57.1` -> `1.58.0`](https://renovatebot.com/diffs/npm/sass/1.57.1/1.58.0) | [![age](https://badges.renovateapi.com/packages/npm/sass/1.58.0/age-slim)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://badges.renovateapi.com/packages/npm/sass/1.58.0/adoption-slim)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://badges.renovateapi.com/packages/npm/sass/1.58.0/compatibility-slim/1.57.1)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://badges.renovateapi.com/packages/npm/sass/1.58.0/confidence-slim/1.57.1)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>hotwired/turbo</summary> ### [`v7.2.5`](https://togithub.com/hotwired/turbo/releases/tag/v7.2.5) [Compare Source](https://togithub.com/hotwired/turbo/compare/v7.2.4...v7.2.5) #### What's Changed - Only snapshot frame visits that have actions by [@kevinmcconnell](https://togithub.com/kevinmcconnell) in [https://github.com/hotwired/turbo/pull/827](https://togithub.com/hotwired/turbo/pull/827) - Skip Snapshot Caching for redirect visits by [@seanpdoyle](https://togithub.com/seanpdoyle) in [https://github.com/hotwired/turbo/pull/804](https://togithub.com/hotwired/turbo/pull/804) - Fix: Promoting lazy-loaded Frames by [@seanpdoyle](https://togithub.com/seanpdoyle) in [https://github.com/hotwired/turbo/pull/790](https://togithub.com/hotwired/turbo/pull/790) - Merge in remaining header elements (eg: link icons, manifest, meta and title) by [@scuml](https://togithub.com/scuml) in [https://github.com/hotwired/turbo/pull/752](https://togithub.com/hotwired/turbo/pull/752) - Allow users to define an async custom render function by [@manuelpuyol](https://togithub.com/manuelpuyol) in [https://github.com/hotwired/turbo/pull/782](https://togithub.com/hotwired/turbo/pull/782) - Allow for listening to turbo events raised from within the Shadow DOM by [@yuki24](https://togithub.com/yuki24) in [https://github.com/hotwired/turbo/pull/802](https://togithub.com/hotwired/turbo/pull/802) - Ensure turbo no longer uses replaceChildren by [@MaxHatfull](https://togithub.com/MaxHatfull) in [https://github.com/hotwired/turbo/pull/808](https://togithub.com/hotwired/turbo/pull/808) - Add better support for shadow DOM by [@yuki24](https://togithub.com/yuki24) in [https://github.com/hotwired/turbo/pull/758](https://togithub.com/hotwired/turbo/pull/758) - Fix: When applications embed [Google Adsense](https://www.google.com/adsense/start/)-powered <iframe> elements, the snippets they provide render them with a \[name] attribute that's set to the empty string "" by [@seanpdoyle](https://togithub.com/seanpdoyle) in [https://github.com/hotwired/turbo/pull/835](https://togithub.com/hotwired/turbo/pull/835) **Full Changelog**: hotwired/turbo@v7.2.4...v7.2.5 </details> <details> <summary>lit/lit</summary> ### [`v2.6.1`](https://togithub.com/lit/lit/blob/HEAD/packages/lit/CHANGELOG.md#261) [Compare Source](https://togithub.com/lit/lit/compare/lit@2.6.0...lit@2.6.1) ##### Patch Changes - [#3526](https://togithub.com/lit/lit/pull/3526) [`65e56655`](https://togithub.com/lit/lit/commit/65e56655b73d22172647c1a748e7a907ad0227c0) - Disable ShadyDOM noPatch in Node dev build. This fixes the issue of throwing due to undefined `window`. - [#3561](https://togithub.com/lit/lit/pull/3561) [`e5c254e9`](https://togithub.com/lit/lit/commit/e5c254e96cb5d0f770ec616332e231559325c5c5) - Fix built-in shimming of `HTMLElement` for Node build of `reactive-element` to respect existing `HTMLElement` in global ### [`v2.6.0`](https://togithub.com/lit/lit/blob/HEAD/packages/lit/CHANGELOG.md#260) [Compare Source](https://togithub.com/lit/lit/compare/lit@2.5.0...lit@2.6.0) ##### Minor Changes - [#3522](https://togithub.com/lit/lit/pull/3522) [`72fcf0d7`](https://togithub.com/lit/lit/commit/72fcf0d70b4f4644e080e9c375a58cf8fc35e9e8) - When running in Node, Lit now automatically includes minimal DOM shims which are sufficient for most SSR (Server Side Rendering) use-cases, removing the need to import the global DOM shim from `@lit-labs/ssr`. The new `@lit-labs/ssr-dom-shim` package has been introduced, which exports an `HTMLElement`, `CustomElementRegistry`, and default `customElements` singleton. The existing `@lit-labs/ssr` global DOM shim can still be used, and is compatible with the new package, because `@lit-labs/ssr` imports from `@lit-labs/ssr-dom-shim`. Importing the global DOM shim adds more APIs to the global object, such as a global `HTMLElement`, `TreeWalker`, `fetch`, and other APIs. It is recommended that users try to remove usage of the `@lit-labs/ssr` DOM shim, and instead rely on the more minimal, automatic shimming that `@lit/reactive-element` now provides automatically. ##### Patch Changes - Updated dependencies \[[`72fcf0d7`](https://togithub.com/lit/lit/commit/72fcf0d70b4f4644e080e9c375a58cf8fc35e9e8)]: - [@lit/reactive-element](https://togithub.com/lit/reactive-element)[@1](https://togithub.com/1).6.0 - lit-html@2.6.0 </details> <details> <summary>sass/dart-sass</summary> ### [`v1.58.0`](https://togithub.com/sass/dart-sass/blob/HEAD/CHANGELOG.md#1580) [Compare Source](https://togithub.com/sass/dart-sass/compare/1.57.1...1.58.0) - Remove sourcemap comments from Sass sources. The generated sourcemap comment for the compiled CSS output remains unaffected. - Fix a bug in `@extend` logic where certain selectors with three or more combinators were incorrectly considered superselectors of similar selectors with fewer combinators, causing them to be incorrectly trimmed from the output. - Produce a better error message for a number with a leading `+` or `-`, a decimal point, but no digits. - Produce a better error message for a nested property whose name starts with `--`. - Fix a crash when a selector ends in an escaped backslash. - Add the relative length units from CSS Values 4 and CSS Contain 3 as known units to validate bad computation in `calc`. ##### Command Line Interface - The `--watch` flag will now track loads through calls to `meta.load-css()` as long as their URLs are literal strings without any interpolation. </details> --- ### Configuration 📅 **Schedule**: Branch creation - "before 6am on wednesday" in timezone Australia/Sydney, Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 👻 **Immortal**: This PR will be recreated if closed unmerged. Get [config help](https://togithub.com/renovatebot/renovate/discussions) if that's undesired. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/google/osv.dev).

yuki24 commented Nov 22, 2022

View reviewed changes

src/tests/fixtures/test.js Outdated Show resolved Hide resolved

yuki24 mentioned this pull request Nov 22, 2022

Turbo data attributes not working when on custom elements #801

Closed

yuki24 force-pushed the 801-turbo-links-in-shadow-dom branch from fb25b11 to e06043f Compare November 22, 2022 08:49

Allow for listening to turbo events from the Shadow DOM

3761311

yuki24 force-pushed the 801-turbo-links-in-shadow-dom branch from e06043f to 3761311 Compare November 22, 2022 13:00

yuki24 changed the title ~~Allow for listening to turbo events raised from the Shadow DOM~~ Allow for listening to turbo events raised from within the Shadow DOM Nov 24, 2022

dhh merged commit 2aed8a0 into hotwired:main Dec 23, 2022

yuki24 deleted the 801-turbo-links-in-shadow-dom branch December 23, 2022 15:03

yuki24 mentioned this pull request Oct 7, 2023

Working Turbo Frames called from the Shadow Dom #1021

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow for listening to turbo events raised from within the Shadow DOM #802

Allow for listening to turbo events raised from within the Shadow DOM #802

yuki24 commented Nov 22, 2022 •

edited

Loading

yuki24 Nov 22, 2022

	return dispatch<TurboClickEvent>("turbo:click", {
	target: link,
	detail: { url: location.href, originalEvent: event },
	cancelable: true,
	})

Allow for listening to turbo events raised from within the Shadow DOM #802

Allow for listening to turbo events raised from within the Shadow DOM #802

Conversation

yuki24 commented Nov 22, 2022 • edited Loading

yuki24 Nov 22, 2022

Choose a reason for hiding this comment

yuki24 commented Nov 22, 2022 •

edited

Loading