angular/aio/content/errors/NG2009.md
Joe Martin (Crowdstaffing) 42289f25c6 docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.

*   To ensure all changes in style are properly separated.
*   To ensure all styled content aligns to nearest 4-character-tab.
*   To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
*   To ensure all markdown exists outside of html tags.
*   To ensure all images use the Angular style for `<img>` elements.
*   To ensure that all smart punctuation is replaced or removed.

    ```text
    ’, ’, “, ”, –, —, …
    ```

*   To ensure all content does not conflict with the following reserved characters.

    ```text
    @, $, *, &, #, |, <, >,
    ```

*   To ensure all content displays using html entities.

The following changes were made to files in the following directory.

```text
aio/content
```

The target files were markdown files.
The list of excluded files:

```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```

PR Close #45325
2022-04-08 19:36:30 +00:00

40 lines
885 B
Markdown

@name Invalid Shadow DOM selector
@category compiler
@shortDescription Component selector does not match shadow DOM requirements
@description
The selector of a component using `ViewEncapsulation.ShadowDom` doesn't match the custom element tag name requirements.
In order for a tag name to be considered a valid custom element name, it has to:
* Be in lower case.
* Contain a hyphen.
* Start with a letter \(a-z\).
@debugging
Rename your component's selector so that it matches the requirements.
**Before:**
<code-example format="typescript" language="typescript">
&commat;Component({
selector: 'comp',
encapsulation: ViewEncapsulation.ShadowDom
&hellip;
})
</code-example>
**After:**
<code-example format="typescript" language="typescript">
&commat;Component({
selector: 'app-comp',
encapsulation: ViewEncapsulation.ShadowDom
&hellip;
})
</code-example>