Support pseudo-element ::part to customize built-in weight styles

[nawbc]

Discussed in https://github.com/toeverything/blocksuite/discussions/6053

^{Originally posted by nawbc January 21, 2024} In some cases, developers need to simply customize the editor styles. The ::part(), exportparts (html global attributes) can be used to simply implement shadow dom element custom styles that u want to expose. and it doesn't affect the overall design.

Why not CSS var attributes? Because it's a heavy workload and not flexible.

Browser Compatibility

https://developer.mozilla.org/en-US/docs/Web/CSS/::part#browser_compatibility

.e.g slash-menu-popover.ts source code.

...
<div class="slash-menu" style="${slashMenuStyles}" part="slash-menu">
  ${this._categoryTemplate()}
  <div class="slash-item-container">${btnItems}</div>
</div>
...

custom.html

<style>
  affine-slash-menu::part(slash-menu) {
    border: 1px solid;
    border-radius: 2px;
  }
</style>

I can PR for this feature.

[doodlewind]

LGTM, would be great to also apply this convention to different widgets!