1618509 - Allow to export multiple parts with a single part name (was: Cannot export shadow part with an alias)

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, task)

Description

[csvn.dev]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:73.0) Gecko/20100101 Firefox/73.0

Steps to reproduce:

1. Create an element with a shadowRoot that has a Shadow part named foo
2. Create a parent element with a shadowRoot, that includes the element mentioned above.
3. Set the exportparts attribute on the parent to export and export+rename the part: "foo, foo: bar"
4. Create CSS to style ::part(foo) and ::part(bar) separately

Reproduction example:
https://jsfiddle.net/957hns23/2/

Actual results:

Only the first instance of the part will work with the styling, foo if "foo, foo: bar", bar if "foo: bar, foo".

Expected results:

Both parts foo and bar should work with the styling

Comment 1

[Peter Magyari (Desktop QA)]

I was able to reproduce the issue on Firefox 73.0.1 and Firefox 75.0a1
I'm setting a component in order to involve the development team in reviewing this issue.

Thank you for reporting!

Comment 2

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1618509 - Allow to export a shadow part under multiple names. r=#style

Other browsers allow this and the spec doesn't really disallow it, so fix it,
add a test and carry on.

Comment 3

[csvn.dev]

Thanks Emilio, I was not certain if this was explicitly stated in the spec. I just thought it might be a common use case (see below), and that It was possible to do this in Chrome when I tested it there too.

<x-post>
  #shadow
    <x-profile exportparts="avatar"></x-profile>
</x-profile>

<x-user>
  #shadow
    <x-profile exportparts="avatar user"></x-profile>
</x-profile>

<style>
::part(avatar) {
  border-radius: 50%;
}
::part(avatar user) {
  border-color: red;
}
</style>

Comment 4

[Emilio Cobos Álvarez [:emilio]]

Yeah, Safari allows this too. Too bad none of the other two engines landed a web-platform-test, otherwise I would've caught this when implementing shadow parts. Oh well...

If it gets reviewed soonish it should land in Firefox 75, otherwise 76 it is.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/0bad929ac77b
Allow to export a shadow part under multiple names. r=jwatt

Comment 6

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/22140 for changes under testing/web-platform/tests

Comment 7

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.

Comment 8

[Oana Pop-Rus]

https://hg.mozilla.org/mozilla-central/rev/0bad929ac77b

Comment 9

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 10

[Ryan VanderMeulen [:RyanVM]]

Does this need a Beta approval request or can this ride 76 to release?

Comment 11

[Emilio Cobos Álvarez [:emilio]]

I think it can ride the trains. It's a minor bug-fix / feature.