feat(custom-element): allow specifying additional options for shadowRoot in custom elements
#12965
Conversation
padcom
changed the title
shadowRoot in custom elements
padcom
changed the title
shadowRoot in custom elementsshadowRoot in custom elements
padcom
force-pushed
the
GH-12964
branch
2 times, most recently
from
045fa73 to
be80e79
Compare
Size ReportBundles
Usages
|
@vue/compiler-core
@vue/compiler-dom
@vue/compiler-ssr
@vue/compiler-sfc
@vue/reactivity
@vue/runtime-core
@vue/runtime-dom
@vue/server-renderer
@vue/shared
@vue/compat
vue
commit: |
edison1105
added
wait changes
🔨 p3-minor-bug
edison1105
added
ready to merge
|
Thanks @padcom |
|
Please excuse my impatience, but when can we expect this to be released? I have a project that makes heavy use of web components and it is something that's blocking the release of interactive components. |
WalkthroughA new optional Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant CustomElement
participant ShadowRoot
User->>CustomElement: Define custom element with shadowRootOptions (e.g., delegatesFocus)
CustomElement->>CustomElement: Constructor invoked
CustomElement->>ShadowRoot: attachShadow({ mode: 'open', ...shadowRootOptions })
ShadowRoot-->>CustomElement: Shadow root created with specified options
Assessment against linked issues
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/runtime-dom/__tests__/customElement.spec.ts (1)
475-493: Good test coverage for the new feature.The test correctly verifies that the
delegatesFocusoption is properly passed to the shadow root. Skipping the test due to jsdom limitations is appropriate, with clear comments explaining why it's skipped and referencing the relevant GitHub issue.Given the jsdom limitation, consider adding a comment in the test description suggesting that this should be manually tested in a real browser environment.
// https://github.com/vuejs/core/issues/12964 // Disabled because of missing support for `delegatesFocus` in jsdom // https://github.com/jsdom/jsdom/issues/3418 // eslint-disable-next-line vitest/no-disabled-tests -test.skip('shadowRoot should be initialized with delegatesFocus', () => { +test.skip('shadowRoot should be initialized with delegatesFocus (requires manual testing in a real browser)', () => {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Cache: Disabled due to data retention organization setting
Knowledge Base: Disabled due to data retention organization setting
📒 Files selected for processing (2)
packages/runtime-dom/__tests__/customElement.spec.ts(1 hunks)packages/runtime-dom/src/apiCustomElement.ts(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
packages/runtime-dom/src/apiCustomElement.ts (1)
packages/shared/src/general.ts (1)
extend(24-24)
packages/runtime-dom/__tests__/customElement.spec.ts (2)
packages/runtime-dom/src/apiCustomElement.ts (1)
defineCustomElement(168-186)packages/runtime-core/src/index.ts (1)
h(109-109)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: test / unit-test-windows
- GitHub Check: test / e2e-test
🔇 Additional comments (2)
packages/runtime-dom/src/apiCustomElement.ts (2)
56-56: Great addition! This extends Vue's custom elements API.Adding the
shadowRootOptionsproperty to theCustomElementOptionsinterface allows users to specify additional shadow DOM initialization options, such asdelegatesFocus, while keeping the shadow root mode enforced as 'open'.
267-271: Well implemented shadow root options handling.The implementation properly uses
extendto merge the user-providedshadowRootOptionswith{ mode: 'open' }, ensuring the shadow root is always created with an 'open' mode while allowing additional configuration options to be passed.This approach addresses the requirements from issue #12964 while maintaining compatibility with existing code.
edison1105
changed the title
shadowRoot in custom elementsshadowRoot in custom elements
|
LGTM~ Maybe we can use vitest's browser mode for testing, but it's an experimental feature for now. |
edison1105
changed the title
shadowRoot in custom elementsshadowRoot in custom elements
edison1105
added
version: minor
✨ feature request
When creating
shadowRootusingthis.attachShadow()there are more options that can be very useful in specific scenarios.https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#parameters
At the moment there is no way to pass those additional options (like
delegatesFocus: truefor focus management). This PR adds the ability to not only specify those but also to override themode: 'open'should one choose to do that.close #12964
Summary by CodeRabbit
New Features
Tests