标签: custom-element

标题是自我解释的.如果我得到多个简短答案,我会在最后编译它们.

在使用v1甚至v0之前,请参阅caniuse.com.

在polymer-cli上运行聚合物初始化时，我遇到了这个问题。

未捕获的DOMException：无法在'CustomElementRegistry'上执行'define'

我想在使用 shadow DOM 的自定义元素中使用带有哈希 URL 的锚元素。我希望浏览器向下滚动到该锚点，但它没有这样做（至少是 Chrome）。

细节：

我有一个像这样的 index.html：

...
<a href="#destinationInsideShadowDOM">Jump</a>
...
<my-custom-element></my-custom-element>
...

另一个用于自定义元素的 html 文件，其中包含锚点：

<template id="my-custom-element">
   ...
   <a id="destinationInsideShadowDOM"></a>
   ...
</template>

当我单击 index.html 中的链接时，我希望浏览器向下滚动到该锚点。

当我将锚点移动到自定义元素之外的 index.html 时，它可以工作，但不能在内部使用。

我花了一些时间进行搜索，但只看到太多常规的“遍历 DOM”博客或仅提升一个级别的答案getRootnode()

伪代码：

HTML

<element-x>
//# shadow-root
    <element-y>
        <element-z>
        //# shadow-root
        let container = this.closest('element-x');
        </element-z>
    </element-y>
</element-x>

标准element.closest()功能并没有捅破阴影边界;

所以this.closest('element-x')返回null因为没有 <element-x>内<element-z>shadowDom

目标：

<element-x>从后代内部查找<element z>（任何嵌套级别）

必需的：

A（递归）.closest()函数，走了（阴影）DOM小号和认定<element-x>

注意：元素可能有也可能没有 ShadowDOM（参见<element y>：仅 lightDOM）

我可以而且明天会自己做；只是想知道是否有聪明的头脑已经做到了。

资源：

• https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode
• https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/host

更新

这是以下答案中的未缩小代码：

        closestElement(selector, base = this) {
            function __closestFrom(el) {
                if (!el || el === document || el === window) return …

我使用 CUSTOM_ELEMENTS_SCHEMA 在 angular 7 中创建了一个自定义元素。我的 app.module.ts 如下：

    export class AppModule {
     constructor(private injector: Injector) {}
     ngDoBootstrap() {
       this.registerCustomElements();
     }

    registerCustomElements() {
      const HeaderElement = createCustomElement(AppComponent, {
        injector: this.injector
      });
      const FooterElement = createCustomElement(BcAngFooterComponent, {
        injector: this.injector
      });
      customElements.define("header-element", HeaderElement);
      customElements.define("footer-element", FooterElement);
  }
}

我在 app.component.html 中引用了这些自定义元素，如下所示：

<footer-element footer-data="footerInputData"></footer-element>

这个 footerInputData 在我的 app.component.ts 文件中作为字符串引用。

 export class AppComponent {
  footerInputData: any = {title: "Page Title"};
}

在我的自定义元素的 HTML 中，我使用插值来显示作为输入传递给它的数据。

<div class="nav-list-wrap">
        {{footerData}}
</div>

当页面加载时，我没有看到显示的对象。相反，它显示的是“footerInputData”。

如何让我的自定义元素从我的 app.component.ts 文件中获取数据，而不是将数据显示为字符串。

另外，JSON 对象可以传递给我的自定义元素吗？

当我们要使用Shadow Dom创建自定义单选按钮作为 Web 组件时，就会出现问题。

<input type="radio" name="size" id="small" value="small">
<input type="radio" name="size" id="large" value="large">

<input type="radio" [name]="name" [id]="id" ...>

...
component cus-radio {
@Input() name: string;
@Input() id: string;
...

<cus-radio [id]="'small'" [name]="'size'" value="small">
<cus-radio [id]="'large'" [name]="'size'" value="large">