Remove `part` restriction

[brandonferrua]

Is your feature request related to a problem? Please describe.

I'd like to propose removing the restriction of using part as a getter/setter, e.g. @api part

I am able to decorate my HTML with part as a content attribute, e.g. <button part="button">. When using both native shadowDOM and syntheticShadow I can access this part attribute with an attribute selector:

[part~="button"] {
  ...
}

If I choose to use native shadowDOM then I get upgraded and can use the ::part pseudo-element with full interop with syntheticShadow since this named part is still treated like a content attribute.

::part(button) {
  ...
}

Since ::part pseudo-element is simply a string and a content attribute is simply a string, they are both apart of the attribute-list comes from NamedNodeMap, what is the harm in accessing part as a getter/setter if the type is restricted to a string?

By removing this restriction, customers can add new part names to decorated nodes, thus increasing the extensibility of this styling capability.

Describe the solution you'd like

Remove the restriction of part as a getter/setter and type check it as a string.

By doing so, a customer could provide CSS through an attribute selectors in both syntheticShadow and native shadowDOM. When choosing to use native shadowDOM they will get upgraded and have access to using ::part pseudo-element immediately since the support comes from the UA.

Describe alternatives you've considered

Polyfill ::part into syntheticShadow or using a non-standard term to mimic the same behavior of part, i.e. hook

cc: @pmdartus @diervo

[nolanlawson]

At first I thought restricting part was due to the fact that there is already a part property on Element. But we don't have the same restriction for @api classList, @api setAttribute, etc. We specifically restrict part:

https://github.com/salesforce/lwc/blob/90b213b6c65834fe7dd33cf1f007a2314954a7f4/packages/%40lwc/babel-plugin-component/src/decorators/api/validate.js#L55-L59

It looks like originally this restriction was added in https://github.com/salesforce/lwc/pull/49 (here). @pmdartus Do you have some context for why this restriction exists?

[pmdartus]

Do you have some context for why this restriction exists?

I don't recall the discussion. I assumed we did restrict the usage of the part public property due to future-proofing concerns.

[nolanlawson]

We still do this:

https://github.com/salesforce/lwc/blob/91ad2026a7db9cb0732de1003355ce8d7c7f7bb7/packages/%40lwc/babel-plugin-component/src/decorators/api/validate.ts#L75-L83

[nolanlawson]

This seems similar to me to @api ariaLabel – we would need to make sure that the property and attribute are properly reflected, and that an LWC component can set the property/attribute on a child.