developit / developit/element-worklet

What if the custom element author wishes for the end user to define the element name?

Ouverte
#1 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub
Langage dominant
Aucune donnée de langage
Étoiles
31
Forks
0
Métriques de merge des PR
Aucune PR mergée en 30 j

Description

A pattern seen in some custom element libraries is that they allow the end user to import the class, and for the end user to decide with which name to call `customElements.define()`.

For example, an end user can do this:

```js
import {NiceElement} from 'some-library'

// End user chooses the tag name:
customElements.define('cool-element', NiceElement)

const el = document.createElement('cool-element')
```

Maybe we should allow this pattern to still be possible with Element Worklets.

For that to be possible, maybe the worklet can call `customElements.define` like the proposal already shows, but maybe also the end user can call it if the worklet doesn't. The alternative form might look like this:

```ts
// nice-element.js

// Use a default export to denote the class for the ElementWorklet perhaps:
export default class NiceElement extends WorkletElement {...}
```

Then the end user can register the element:

```js
// end-user.js
customElements.defineWorklet('cool-element', 'path/to/nice-element.js')

const el = document.createElement('cool-element')
```

Or maybe we can rely on the [stage 3 import assertions proposal](https://github.com/tc39/proposal-import-assertions) (I feel like the "import assertions" naming is strange). It could look like this:

```ts
// nice-element.js
// This is not a default export (the author can use any type of export):
export class NiceElement extends WorkletElement {...}
```

```js
// end-user.js
import {NiceElement} from 'path/to/nice-element.js' assert { type: "element-worklet" }

// customElements.define would automatically know how to handle WorkletElement proxy classes:
customElements.define('cool-element', NiceElement)

const el = document.createElement('cool-element')
```

`assert` doesn't quite match the semantic though. It seems that `assert` is for asserting mime types, but the worklet would have the same mime type as any other JSON file. So maybe some other sort of "import attribute" would be needed in a follow on like that proposal mentions:

```js
import {NiceElement} from 'path/to/nice-element.js' with { elementWorklet: true }
```

or something?

Guide de contribution

Aucun guide de contribution indexé pour ce dépôt

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.