Skip to content

[css-shadow-parts] Expose parts programmatically #3228

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.

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

Open
JanMiksovsky opened this issue Oct 19, 2018 · 4 comments
Open

[css-shadow-parts] Expose parts programmatically #3228

JanMiksovsky opened this issue Oct 19, 2018 · 4 comments

Comments

@JanMiksovsky
Copy link

It would be helpful for components with parts to expose those parts in some way that's programmatically inspectable.

For components with an open shadow root, someone could query inside the shadow for elements that have a part attribute, but this is not possible for components with closed shadow roots. To avoid leaking shadow elements, the proposed mechanism would return an array of string part names, not elements.

This would be akin to property reflection, and good for things like design/debugging/testing tools. E.g., it'd be nice if a tool could ask a DOM element what parts it has so that the tool can show the user a list of the parts available for styling.

Using the spec's example:

<template id="c-e-template">
  <span part="textspan">This text will be red</span>
</template>

The goal would be to allow something like:

const e = document.createElement('custom-element');
e.parts; // Returns the array ['textspan']
@FremyCompany
Copy link
Contributor

That does seem useful indeed.

@tabatkins
Copy link
Member

Yeah, this seems useful to expose; otherwise, the only place such information is exposed is in the (hopefully existent!) library docs.

It feels like something that DevTools would want to expose too; DevTools has magic powers and can get into closed shadow roots, but other tools offering similar behavior wont' have those powers and would want this information.

@fergald
Copy link
Contributor

fergald commented Dec 12, 2018

With exportparts, this could be an expensive operation, you have to descend into children and apply the exportparts maps at each level. Currently we don't ever assemble all of the parts of a given component like this but it does seem like something devtools should provide at least.

Are there other useful things that external dev tools cannot do with closed custom elements or shadow roots that built-in dev tools can? By useful I guess I mean things like API discovery, not things like digging around in implementation details.

@tabatkins
Copy link
Member

That's a reasonable concern; marking it as a function rather than an attribute is probably appropriate, then.

This recursion is no more expensive than many other recursive operations, so we don't need to do anything more special than that. But having it recurse does violate the usual expectation of attributes=cheap.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants