Use `mode: "open"` in search component `attachShadow`?

[jaywonchung]

I'm on Chrome with the Vimium plugin, which allows people to navigate websites with vim-like keybindings like u, d, j, k, f, F, etc.

I noticed a very subtle issue in Zensical's search overlay (cmd-k/ctrl-k), where Vimium was not able to detect the fact that the cursor is activated within an input element. Normally it can and will disable keybindings, so pressing j will insert the character j in the input box instead of scrolling down. I've been using Vimium for 5+ years and this works very reliably, so I was surprised when this didn't work for Zensical's search overlay input box.

I realized that this is due to the following:

ui/src/assets/javascripts/components/search/_/index.ts

Lines 95 to 97 in 85fc426

	// Create a shadow root and inject search
	const shadow = host.attachShadow({ mode: "closed" })
	shadow.appendChild(h("style", {}, css.toString()))

Using mode: "closed" basically prevents external access to the elements inside, and thus Vimium is not able to inspect the HTML elements and figure out that an input element is focused.

I verified this by building my doc site with Zensical (0.0.23) and manually modifying site/assets/javascripts/bundle.5fcf0de6.min.js to use mode: "open" for the search component, and Vimium was indeed able to detect the input box and disable keybindings like usual.

I don't know if the use of mode: "closed" was intended. Would you be open to switching to mode: "open"? I'll post a PR if so.

Thanks.

cc. @squidfunk

[squidfunk]

Thanks for reporting. We can switch it to open – PR appreciated! Please also go through the build process, ensuring the built files are part of the PR.

git clone ...
npm install
npm run build

---

No need to CC me personally by the way, we are monitoring all repositories closely, and we have a team now, so it's not necessarily me that has to answer ☺️