- From: Khushal Sagar via GitHub <sysbot+gh@w3.org>
- Date: Tue, 25 Oct 2022 23:28:17 +0000
- To: public-css-archive@w3.org
Thanks for summarizing this Vlad! One thing missing from the list above is the CSS property used to tag a DOM element. I think we have consensus there on `view-transition-name`. I'll post a combination of name + selector syntax from the options above for each pseudo-element. So we can have a precise resolution: ### Option 1 (Full chaining) ```css /* root for all pseudos */ html::view-transition /* container for DOM elements with tag foo */ html::view-transition::view-transition-container(foo) /* Isolation node for the 2 replaced elements */ html::view-transition::view-transition-container(foo)::view-transition-image-group(foo) /* Replaced element for old content */ html::view-transition::view-transition-container(foo)::view-transition-image-group(foo)::view-transition-old(foo) /* Replaced element for new content */ html::view-transition::view-transition-container(foo)::view-transition-image-group(foo)::view-tranition-new(foo) /* Each selector with args uses * to select all pseudo-elements of that type */ html::view-transition::view-transition-container(*) html::view-transition::view-transition-container(*)::view-transition-image-group(*) html::view-transition::view-transition-container(*)::view-transition-image-group(*)::view-transition-old(*) html::view-transition::view-transition-container(*)::view-transition-image-group(*)::view-transition-new(*) ``` ### Option 2 (Reduced chaining) ```css /* root for all pseudos */ html::view-transition /* container for DOM elements with tag foo */ html::view-transition::container(foo) /* Isolation node for the 2 replaced elements */ html::view-transition::container(foo)::image-group /* Replaced element for old content */ html::view-transition::container(foo)::image-group::old /* Replaced element for new content */ html::view-transition::container(foo)::image-group::new /* Each selector with args uses * to select all pseudo-elements of that type */ html::view-transition::container(*) html::view-transition::container(*)::image-group html::view-transition::container(*)::image-group::old html::view-transition::container(*)::image-group::new ``` This option is terse but we'd end up using `old` and `new` as pseudo-element names which seem too generic. ### Option 3 (Direct html selector) ```css /* root for all pseudos */ html::view-transition /* container for DOM elements with tag foo */ html::view-transition-container(foo) /* Isolation node for the 2 replaced elements */ html::view-transition-image-group(foo) /* Replaced element for old content */ html::view-transition-old(foo) /* Replaced element for new content */ html::view-transition-new(foo) /* Each selector with args uses * to select all pseudo-elements of that type */ html::view-transition-container(*) html::view-transition-image-group(*) html::view-transition-old(*) html::view-transition-new(*) ``` ### Option 4 ([Part](https://w3c.github.io/csswg-drafts/css-shadow-parts/#part) like) ```css /* root for all pseudos */ html::view-transition /* container for DOM elements with tag foo */ html::view-transition-part(container foo) /* Isolation node for the 2 replaced elements */ html::view-transition-part(image-group foo) /* Replaced element for old content */ html::view-transition-part(old foo) /* Replaced element for new content */ html::view-transition-part(new foo) /* Specifying the part associated with only the element type selects all elements of that type */ html::view-transition-part(container) html::view-transition-part(image-group) html::view-transition-part(old) html::view-transition-part(new) ``` -- GitHub Notification of comment by khushalsagar Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7788#issuecomment-1291245214 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 25 October 2022 23:28:19 UTC