问题标签 [native-web-component]

我正在尝试为输入元素创建一个本机 Web 组件。我希望该组件具有自定义验证功能，类似于聚合物的纸张输入自定义验证器功能。我不确定是否可以将自定义验证器函数作为属性传递给（Web 组件）输入元素的实例。任何建议，将不胜感激。

两种 CSS（一个在 light dom 中，一个在 shadown dom 中）都对标签有影响。
姓名和电话也受全局 CSS at 和 Shadow Scope CSS 的影响！！！
为什么 ？？？？？我不想要它。
我预计它们只是受到模板范围内的 Sahdow 范围 CSS 的影响。
我希望我能从你那里得到一些想法。

https://plnkr.co/edit/Asr1S1UFvhmhtZeWm5k8

我有一个动态创建div. 除此之外，我还有一个 webcomponent scrollable-div，它是从HTMLDivElement. 由于我无法控制divjQuery 插件是如何创建它的，因此我需要在创建之后以及它已经添加到 DOM 之后对其进行升级。

简单地添加is="my-div"属性显然不能解决问题，div只是保持常规HTMLDivElement。如何以编程方式将 DOM 中的原生元素升级为自定义的内置 Web 组件？

在使用自定义元素的 MDN 文档中，他们详细介绍了自定义内置元素的示例：

允许这种用法：

我想知道是否可以以相同的方式自定义另一个自定义元素？例如，如果我创建了一个名为 的元素custom-element，并且我想要它的变体，我可能想要创建一个新special-custom-element类，并以相同的方式定义它，以便能够像这样使用它：

但是，我收到一条错误提示： Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': "custom-element" is a valid custom element name

尝试运行以下命令时：

这是我做错了什么，还是这种行为严格限于内置元素？除了我链接到的页面上的内容之外，我发现很难找到有关此行为的任何信息，因此我希望从更了解规格的人那里获得一些建议。

我按照此处的指南使用纯 JS/HTML/CSS 创建了一个本机自定义元素作为 Web 组件。

现在我想知道如何为这样的组件编写单元测试。有一个出色的库 Web 组件测试器，但我相信它仅适用于使用聚合物创建的组件。

由于我的组件不是聚合物网络组件，而是原生组件，有人可以为我指出正确的单元测试方向吗？

I need to find a very performant way to find out if a custom element or any of its parent elements has display: none;

First approach:

Is there anything that runs faster than this? Is this even a safe method?

The reason I need this: We have a <data-table> custom element (native webcomponent) which does very heavy lifting in its connectedCallback(). We have an application that has like 20-30 of those custom elements in a single page, which leads to IE 11 taking like 15 seconds until the page is rendered.

I need to delay initialisation of those <data-table> components which are initially not even visible, so I need a way to test inside the connectedCallback() if the element is visible (which it is not if it is in one of the 18 tabs initially not shown).

自定义元素是通过扩展 HTMLElement 类创建的。

因此，当您创建一个时，您似乎必须采取特殊的预防措施，不要为您的自定义元素提供任何已经从 HTMLElement 继承的自定义属性名称。

我可以想象多种避免这些潜在命名冲突的方法，但会对其他人的建议或有关该主题的任何最佳实践感兴趣。

我有一个带有回调函数“myCallback”的本机 Web 组件。

我想在 Angular 中使用这个 webcomponent 并为其分配一个回调，但它似乎不起作用。这是我到目前为止所尝试的：

上面的第一行会抛出错误“angularCallback is not a function”，因为它不是在窗口中定义的，而是在 Angular 中定义的。其他行永远不会被调用，也不会引发任何错误。

作为一个简单的测试，我尝试了以下，它工作正常：

有没有办法通过模板在 Angular 中分配回调？

更新解决方案

我犯的错误是我尝试[my-callback]而不是[myCallback]

所以解决方案如下：

我有一个<my-el>结构类似于此的自定义元素（纯静态的、服务器渲染的 HTML）：

由于 Chrome 不保证connectedCallback自定义元素中的子元素可用性，我正在使用HTMLParsedElement它，它基本上使用以下步骤延迟自定义元素初始化：

1. 测试元素（或任何祖先元素）是否具有nextSibling（在这种情况下，解析器可能已经通过my-el），或者是否DOMContentLoaded已经到达（又名document.readyState !== 'loading'）。
2. 如果以上都不是，设置一个MutationObserver就childList重新检查以上条件。

目前概述的策略仍然存在的问题是，MutationObserver当这是可用的 HTML 时，可能会被触发：

甚至这个

在这些情况下，MutationObserver 会被触发多次，并且处理程序无法知道</my-el>实际何时到达末尾。

问题：有谁知道div像这样包装所有内部元素是否可以解决这个问题：

或者换句话说，当突变观察者为此结构触发时，我是否可以可靠地假设包装子 div 完全可用，包括它的所有后代节点？

我有一个 Web 组件，它基本上封装了我的应用程序。在它的影子 DOM 中还有更多的 Web 组件（以及标准的 HTML/CSS 内联 + 外部/脚本内联 + 外部），而这些 Web 组件又可能在它们的影子 DOM 中包含其他组件……等等。

我有一个加载叠加层，我希望显示它，直到所有内容都加载并绘制/样式等...

我觉得应该有一些我可以参与的事件。我做了一些搜索，似乎表明没有，但考虑到它的发展，我认为事情可能已经改变了？如果没有活动 - 我怎么能自己写这个？

仅针对 Chrome 71