Angular 角度自定义元素和语义标记

我尝试将我的组件分解成小块，并面临语义和类管理问题

例如：包含三个组件的嵌套结构：出版物、出版物标题和出版物标题

出版物组成部分：

<article class="publication">
  <app-publication-header></app-publication-header>
</article>

<header class="publication__header">
  <app-publication-title></app-publication-title>
</header>

<h1 class="publication__title">Publication Title</h1>

---

我强烈建议您以一种可读性和可操作性都很强的方式编写代码

你必须确保你没有污染你的html

您应该始终使用基于组件的结构，以使代码松散耦合。以便在必要时重复使用

所有的类和样式都应该是组件私有的

要使用嵌套样式，请使用decorator模式，以便组件保持可配置状态

我建议您使用如下代码

出版物名称

---

已编辑到顶部链接解决方案-请参见

虽然我完全理解库尔德普斯的建议，并同意其中许多建议，但我不同意他的最终结果。 我也有你似乎有的问题。 我想编写一个好的、干净的html5，它具有良好的语义标记，并且没有额外的标记。 您的代码应该能够生成

<article class="publication">
  <header>
    <h1>Publication Title</h1>
  </header>
</article>

哪个在寻找

<app-publication>

<{anytag} app-publication>

哪个在寻找

<app-publication>

<{anytag} app-publication>

将其限制为仅适用于物品

如果您发现了更好的解决方案，请回复-您正在尝试正确使用html5，所以如果角度限制您，请不要拖延

<article app-publication> 

<header app-publication-header>

<app-publication>

<app-publication-header>

selector: "app-publication",

<app-publication>

selector: "[app-publication]",

<{anytag} app-publication>

selector: "article [app-publication]",