Templating creates unwanted custom elements
- Dominant language
- TypeScript
- Stars
- 113
- Forks
- 101
- PR merge metrics
- No merged PRs in 30d
Description
I am editing this issue, the original text is below.
I originally thought that the root of the problem was Aurelia creating custom elements from exports without convention nor decorator. But from comments below it was clarified that this is actually supported in some scenarios.
With this in mind, I now think that the root of the problem is that Aurelia should _not_ register a local custom element when instantiating a dialog like so:
```js
import { MyDialog } from 'dialogs/whatever';
dialogService.open({ viewModel: MyDialog });
```
This code should _not_ result in the registration of a `` custom element.
It is mostly harmless, but if your exported name clashes with other tags it's breaking the app.
----
From aurelia/dialog#283:
When loading a _component_ (e.g. a view model for a dialog, a page to be loaded in the router, etc.), `aurelia-templating` falls back to creating a custom element based on the exported component name.
I think the logic for that is here:
https://github.com/aurelia/templating/blob/7693dbd65e59e428e4052922920145b76240f3cf/src/module-analyzer.js#L253
Now consider what happens if I choose to name my ViewModel `export class A { }`. When used by a dialog or router, it will create a `` custom element, which is of course unwanted and will trigger bugs if there are links in the template.
Expected behavior:
Only classes decorated with `@customElement` or following a convention (by default ending in `CustomElement`) should create custom elements.
Contributor guide
Research direction
Start in src/module-analyzer.js around the linked logic at line 253, then trace how a component passed to dialogService.open is analyzed. Confirm the behavior for an exported MyDialog class and for classes using @customElement or the default CustomElement convention. Done means an undecorated, non-conventional dialog view model no longer registers a local custom element.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100