Javascript 角度，使用基于父零部件的短零部件选择器

我正在为UI组件开发一个库。我创建了一个父组件（使用ng内容），将css分配给子组件，并声明将使用库的元素组件构建接口的这一部分

我希望避免每次都为子组件编写带有前缀的全名

例如，我想构建一个表单组件：

<dvl-ui-theme theme="basic">
  <dvl-ui-active-form>
    <dvl-ui-input name="input-name">
  </dvl-ui-active-form>
</dvl-ui-theme>

我想用像这样的东西

<dvl-ui-theme theme="basic">
  <active-form>
    <input name="input-name">
  </active-form>
</dvl-ui-theme>

它将更短，可读性更强

有什么办法可以做到这一点吗

编辑：总结并澄清-我希望基于父组件元素有不同的组件选择器

---

通常我会使用

，但由于输入是在表单中，我希望使用

并初始化相同的组件角度组件的选择器在

***.component.ts

文件中定义：

@Component({
  selector: 'app-root', // <= here you can change the selector of your component
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {}

@组件({
选择器：“app root”，//我知道，但我希望它基于嵌套元素的父组件具有不同的选择器。我认为这是不可能的。至少angular没有提供现成的解决方案。要自己实现一些类似的行为，您可以使用
ComponentFactoryResolver
。但只能使用（稍微）更好的可读性可能不值得付出努力。我很好奇如何在
window.customElements.define（“my-tag-name”，CustomElementConstructor）”中注册新的
标记
。
您可以定义任何自定义元素。这可能是比前面的注释更好的提示。
<app-root></app-root>