Skip to content

fix(custom-element): ensure correct order of nested component styles #13030

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 4 commits into from
Closed

fix(custom-element): ensure correct order of nested component styles #13030

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
07d28f8
fix(custom-element): ensure correct order of nested component styles
Mar 13, 2025
c953666
chore: update
Mar 14, 2025
a03dcca
chore: tweaks
edison1105 May 21, 2025
b53b103
Merge branch 'main' into fix-customElement-styles
edison1105 May 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions packages/runtime-dom/__tests__/customElement.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -886,6 +886,39 @@ describe('defineCustomElement', () => {
assertStyles(el, [`div { color: blue; }`, `div { color: red; }`])
})

test('child components styles should before parent styles', async () => {
const Baz = () => h(Bar)
const Bar = defineComponent({
styles: [`div { color: green; }`],
render() {
return 'bar'
},
})
const WrapperBar = defineComponent({
styles: [`div { color: blue; }`],
render() {
return h(Baz)
},
})
const WBaz = () => h(WrapperBar)
const Foo = defineCustomElement({
styles: [`div { color: red; }`],
render() {
return [h(Baz), h(WBaz)]
},
})
customElements.define('my-el-with-wrapper-child-styles', Foo)
container.innerHTML = `<my-el-with-wrapper-child-styles></my-el-with-wrapper-child-styles>`
const el = container.childNodes[0] as VueElement

// inject order should be child -> parent
assertStyles(el, [
`div { color: green; }`,
`div { color: blue; }`,
`div { color: red; }`,
])
})

test('with nonce', () => {
const Foo = defineCustomElement(
{
Expand Down
13 changes: 10 additions & 3 deletions packages/runtime-dom/src/apiCustomElement.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,7 +229,7 @@ export class VueElement
private _connected = false
private _resolved = false
private _numberProps: Record<string, true> | null = null
private _styleChildren = new WeakSet()
private _styleChildren = new WeakMap<ConcreteComponent, HTMLStyleElement[]>()
private _pendingResolve: Promise<void> | undefined
private _parent: VueElement | undefined
/**
Expand Down Expand Up @@ -596,18 +596,25 @@ export class VueElement
owner?: ConcreteComponent,
) {
if (!styles) return
const styleElements: HTMLStyleElement[] = []
if (owner) {
if (owner === this._def || this._styleChildren.has(owner)) {
if (owner === this._def) return
const existingStyles = this._styleChildren.get(owner)
if (existingStyles) {
// move existing styles to the top
this.shadowRoot!.prepend(...existingStyles)
Copy link
Member

@edison1105 edison1105 May 23, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The logic here is incorrect; the rendered style should not be moved to the very top but rather before the current parent component's style.

see

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

插入顺序确实有点问题。我看到你已经提了新pr，先关闭这个pr

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because I'm not entirely sure if my implementation is correct, I didn't make changes directly to your PR but instead created a new one. If you're interested, you could help review it.

return
}
this._styleChildren.add(owner)
this._styleChildren.set(owner, styleElements)
}

const nonce = this._nonce
for (let i = styles.length - 1; i >= 0; i--) {
const s = document.createElement('style')
if (nonce) s.setAttribute('nonce', nonce)
s.textContent = styles[i]
this.shadowRoot!.prepend(s)
if (owner) styleElements.unshift(s)
// record for HMR
if (__DEV__) {
if (owner) {
Expand Down