Re: [WICG/webcomponents] Scoped Custom Element Registries (#716)

I think non-bubbling is definitely better. Bubbling lead to a bit of confusion in AngularJS and non-bubbling improves separation and I believe it will reduce the cognitive load of working with a custom element if done right.

I am not completely sure whether globally scoped custom elements should be included. I think registering core UI elements in the global registry could be a definite productivity boost. But as with anything global it is a footgun. It would also allow more gradual refactoring to scoped registries. What are your opinions on this?

I really like how you register local components in Vue, and I think we should take some inspiration from that.

```javascript
this.attachShadow({
  mode: 'open',
  customElements: {
    MyInput,
    SomeWidget,
  }
})
```

With PascalCase it is easier to compose multiple custom element collections. If kebab-case is required, you would have to default export an object. Greppability will however improve if kebab-case is required, so I don't have a strong opinion on the matter.

```javascript
import * as formElements from './elements/formElements.js'
import * as buttons from './elements/buttons.js'

this.attachShadow({
  mode: 'open',
  customElements: {
    ...formElements,
    ...buttons,
  }
})
```

If there is a need to access or set the `CustomElementsRegistry` directly (I can't think of a good reason), it could be accessed through `ShadowRoot#customElementsRegistry` and specified by passing `customElementsRegistry` to `attachShadow` with an XOR check for `customElements` and `customElementsRegistry`.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/716#issuecomment-1013105233
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/716/1013105233@github.com>