2

I'm reviewing this Angular 5 forms youtube tutorial and in it Sebastian initially has the form selector named app-form01, but he removes the app- portion. IIUC custom elements are supposed to have the -. Has this been relaxed?

Ole
  • 41,793
  • 59
  • 191
  • 359
  • No, the rule is not relaxed. But Angular is probably not playing by the rules. Which may not be a problem for their style of component. https://w3c.github.io/webcomponents/spec/custom/#valid-custom-element-name – Intervalia Dec 18 '17 at 19:01

2 Answers2

6

- is not required at all. It is considered good practice because it conforms to the custom element requirements. Besides that the behavior of the component will be exactly the same with or without the - and you can also use mixed case names.

See also

During the kebab-case removal we kept element selectors dasherized because of custom element spec.

Component name remains dash-cased because a dash is required by the custom element spec, which we use for guidance since even after making Angular templates case-sensitive the templates remain valid html5 fragments (although with higher fidelity due to case-sensitivity that only our html parser can see).

Very few people know about the custom element spec and the guarantees the dash gives us, so I think that it would be better to enforce that all directive/component element selectors have at least a single dash in it. There should be a way to opt out via a flag in the Component/Directive metadata, but it shouldn't be on by default.

If someone is unfamiliar with the custom element spec, the benefits of adding a dash to the element name are:

  • the element becomes a custom element - the type of the DOM node is HTMLElement instead of HTMLUnknownElement
  • in case we need it, we can benefit from the :unresolved psedo-class by registering a fake element via document.registerElement
  • the spec guarantees that browsers will not introduce native elements with a dash in the name, meaning that apps won't break in the future should browsers natively implement an element that matches an Angular Component selector (e.g. )

More info about custom elements.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • consider having a directive with `app-my-directive` as selector, would `AppMyDirective` work inside the `HTML` template (even though we did not set that as selector), like an alias? – Top-Master Apr 21 '19 at 12:16
  • 1
    No, there is no automatic alias or a way to create one explicitely. – Günter Zöchbauer Apr 21 '19 at 12:21
2

You can have your tags without the - separating words, Angular won't know your words are joined, it's just another identifier for it:

<app-my-tag> -> <appmytag>

Furthermore, you can leave out the whole prefix altogether:

<app-my-tag> -> <mytag>

But, not using - separators make your tags harder to read, and not using prefixes for your custom tags increases the chances of name clashes.

Daniel
  • 21,933
  • 14
  • 72
  • 101
  • You might as well get used to using the `-` dash since that complies with the web component naming rules. And if you ever move to Native components from Angular then you will need to use the dash. – Intervalia Dec 18 '17 at 19:02