feat: MCD-1400 Add an option to pass custom element components only declared props. - #537
Open
drubot wants to merge 2 commits into
Open
feat: MCD-1400 Add an option to pass custom element components only declared props.#537drubot wants to merge 2 commits into
drubot wants to merge 2 commits into
Conversation
Vue attribute fallthrough for custom elements stays the default; the filtering is enabled with `customElementDeclaredPropsOnly`.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
A custom element is a data payload, but it is handed to the component as vnode
props: every key the component does not declare falls through to its root
element and is serialised as a non-standard HTML attribute. A Drupal-side field
addition then changes the markup of components that never asked for it.
This adds an opt-in way to close that at the CE render boundary:
With it, a custom element component receives only the props it declares.
Everything else is dropped, and logged in dev mode. Attributes that are valid on
any element still pass through:
class,style,id,role,lang,dir,hidden,tabindex,data-*,aria-*and event listeners — that is howDrupal's own
attributesreach the markup.Default is
false: Vue attribute fallthrough stays the upstream behaviour, sonothing changes for existing consumers unless they turn it on. The option only
touches elements rendered from custom element JSON; components used from a
template keep normal fallthrough either way.
Why a wrapper
Nuxt registers global components asynchronously, so the declared props are not
readable when the vnode is created.
withDeclaredProps()therefore returns anasync component that resolves to a filtering shim around the real one — the
same suspense behaviour as the component it replaces. The wrapper is cached per
resolved component, so a re-render reuses the vnode type instead of remounting
the custom-element subtree.
Note for consumers turning it on
A component that took undeclared keys out of
$attrsand relayed them to achild (
v-bind="{ ...$props, ...$attrs }") must declare those props.Verification
test/nuxt/customElementProps.test.ts— with the option off, undeclared keysstill fall through (the upstream behaviour is asserted); with it on, declared
props arrive, undeclared keys are dropped for both synchronously and
asynchronously registered components, global attributes survive, slots still
render, and a re-render patches in place rather than remounting.
builds and hydrates real Nuxt apps.
eslint .clean apart from onepre-existing error in
playground/components/global/drupal-view--default.vue.test/nuxt/components/preview.test.tsasserted on the leak itself: itsfixture sent
bodyas a legacy prop ontonode--default.vue, which has abodyslot, and the assertion passed only because the markup was renderedinto a
body="<p>…</p>"attribute. The fixture now sends it as a slot, so thetest asserts the rendered body — correct with the option in either position.
Relation to the component-side fix
This closes the CE boundary. It does not cover one kickstart component
v-binding a CE object onto another (v-bind="image"ontoLupusImage/LupusPictureElement), which never crosses that boundary — that islupus-nuxt3-kickstart#1401,
where the receiving component sets
inheritAttrs: falseand binds a filtered$attrs. Between the two, both classes are closed.Ticket: MCD-1400