Avoid child elements in translation units

[rajsite]

Elements in an angular template with the i18n attribute should not have child elements. For example:

👎 Incorrect code for the rule

<nimble-toggle-button i18n>
    <nimble-thumbtack-icon slot="start"></nimble-thumbtack-icon>
        Pin navigation
</nimble-toggle-button>

👍 Correct code for the rule

<nimble-toggle-button>
    <nimble-icon-thumbtack slot="start"></nimble-icon-thumbtack>
    <span i18n>Pin navigation</span>
</nimble-toggle-button>

Unfortunately, angular eslint does not have a rule for that yet, but there is an existing issue: angular-eslint/angular-eslint#930

For more about why we want to avoid this behavior see this Skyline PR. This is also currently documented on the Angular Internationalization page,

[jattasNI]

One idea to fix this would be to write a custom script (not an ESLint plugin) that scans the extracted XLIFF/JSON strings and fails if it contains any HTML tags. Clients would call that CLI tool from their lint/build script.

Or we could contribute a custom rule in angular-eslint.