问题标签 [native-web-component]

我是 Web 组件的新手，正在尝试构建一个可重用的组件，将 Kendo UI 组件与远程数据源相结合。Kendo 组件依赖于使用 $(document).ready(function() 来初始化它。当我将该代码放入组件时，它永远不会触发。

如果我只是将 html 标记放在组件中，并将脚本在主代码中对其进行初始化，它就可以正常工作。如果我将脚本放在组件中：我认为它不会触发。我已经在他的代码中放置了一个 console.log 来查看我是否看到任何东西，但 zilch。我在控制台上没有收到任何错误，也看不到任何有用的东西可以帮助我解决这个问题。组件代码如下

我的问题中粘贴的该声明是从https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks复制的。

作为一个没有 Webcomponent 经验的开发人员，我试图了解迄今为止推荐的所有经验法则和最佳实践。

继续阅读它说“......使用 Node.isConnected 来确保”。这意味着什么很明显：检查它是否仍然连接但不清楚，至少对我来说，我应该做些什么来解决它或者在某些情况下我应该期待什么。

我的情况是我正在创建一个 Web 组件来监听 SSE（服务器发送事件）。这对于生活仪表板和其他几个场景很有用。从 Kafka Stream 消费后，SSE 事件将基本上由 NodeJs 或 Spring Webflux 响应。

到目前为止，我所做的所有简单示例都没有遇到在连接回调期间元素不再连接的任何问题。

此外，我没有阅读最佳实践中关于“不再连接的元素”的任何建议。

我读了一些很好的讨论：

can-a-custom-elements-connectedcallback-be-called-more-than-once-before-disc

从那里我了解到我总是可以信任这个生命周期构造函数--> connectedCallback--> disconnectedCallback。

和

当所有子自定义元素都已连接时，如何使用“connectedCallback”

基本上我了解到没有“在所有孩子升级后调用”的特定方法

这两个问题都接近我的问题，但它没有回答我：应该注意哪些挑战或风险，或者如何解决“一旦您的元素不再连接，可能会调用connectedCallback”的可能性？在我上面描述的情况下，我缺少任何治疗方法吗？我是否应该创建一些观察者，当元素不再可用于重新创建事件源对象并再次向此类事件源对象添加侦听器时触发？

我粘贴了下面的代码进行说明，完整的 Webcomponent 示例可以从https://github.com/jimisdrpc/simplest-webcomponet及其后端从https://github.com/jimisdrpc/simplest-kafkaconsumer克隆。

我正在学习 Web 组件，并正在构建一个动态列表来掌握它们。让它工作后，我读到最好使用该connectedCallback方法附加影子根。但是，尝试这样做后，我得到了一堆我无法修复的错误。此外，我为标签设置简单属性的方式似乎有点冗长：是否有更简单的方法来获取属性并将其显示为标签？

这是我的工作示例：

当我添加一个connectedCallback()方法并在那里创建 shadow dom 时，我得到了一堆错误。我的标记只是：

我试过这个：

但得到错误：

TypeError：无法分配给“”上的属性“innerText”：不是对象

我在一家拥有大量 webcomponents 目录的大公司使用 Polymer 1 和 2 工作了大约一年，我相信 webcomponents 会非常有用。我知道像https://adamsilver.io/articles/the-problem-with-web-components/这样的“缺点想法” 。

现在我正在深入研究如何有效地使用 vanilla webcomponents。我刚开始的前提是使用 vanilla web-components 将有助于与 webcomponents 改进保持一致（我不能为这样的想法辩护——我现在只是假设这一点）。然后我正在尝试创建一个堆栈来使用 vanilla webcomponents。

搜索推荐的测试方法我到达了https://open-wc.org/testing并且我认为它旨在促进良好实践而不添加特定框架（来自其网站：“开放 Web 组件是一项社区努力，独立于任何框架或公司”）。这正是我正在寻找的：一种良好的实践和众所周知的推荐，类似于我们从 micorservice.io 获得的微服务（这只是一个类比）。

尝试使用 package.json 中的脚手架：

所以，我的主要问题是：为什么 lit-html 用于 web 组件？

围绕我的主要问题的有用疑问，据我所知，lit-html 是由谷歌和聚合物团队赞助的框架。这不是以某种方式迫使我使用 polifylls 在所有浏览器中运行吗？假设我不关心浏览器不符合 web 组件，我为什么需要一个框架？

我创建了两个 Web 组件并将其中一个嵌套到另一个中。他们俩都有它的constructor。我遇到的问题是，我无法控制运行constructors 的序列。有什么办法可以解决这个问题吗？

这是我的代码：

子网页组件：

父网页组件：

索引.html

结果：

背景：到目前为止，我并不介意如何将模板 html 文件导入我的 vanilla webcomponent，因为我总是编写小的 html 代码。因此，我在我的 webcomponent .js 文件之上编写了 html 代码，并执行以下操作：

这在教程、博客和论坛中很常见。现在我想将 html 与 javascript 分开，假设这将使我的项目树更清晰。

环顾四周，我发现了一些基于浏览器将不再支持“导入”的假设的讨论[（请参阅底部关于导入替代方案的更新讨论）]。1

基本上，这让我想到了两种可能性：

1 - 将 .js 文件从 html 导入到 html 示例：

2 - 从 .js 文件中异步获取 my-webcomponent.html

根据 2017 年的此类讨论，我似乎应该避免使用选项 1，但我不清楚为什么以及选项 2 是否有一些真正的优势。所以我的直截了当的问题是：“进口”和在编码 Vanilla Web 组件时“获取”html 文件，该文件预计将由支持本机 Web 组件的浏览器（例如 Chrome）直接呈现？

基本上，我想<template>从 javascript 中查询选择一个并且我一直为空。

JavaScript 文件：

来自我的 vanilla webcomponent 的模板对象

索引.html

主要问题是 document.querySelector("my-import-webcomponent-template") 返回未定义。

如果它添加了一些有用的东西，如果我尝试将 javascript 和 html 保存在同一个文件中，而不是 querySelector 我直接创建元素，我可以成功地做到这一点。

全部在一个文件中

如果不是出于两个原因，我的问题将与queryselector完全相同：（1）他们似乎依赖于 Polifys，这不是我的情况；（2）接受的答案基于 document.currentScript.ownerDocument 哪个据我所知，需要一个旧图书馆。

*** 建议使用后编辑，而不是

什么都没有改变

*** 建议添加“#”后编辑。完全没有变化

因为我想保持自定义元素自包含，所以我想避免在window对象上放置对成员变量的引用。

我创建了一个自定义 Web 组件（没有任何框架）。然后我用模板标签中的内容填充它。

最后，我使用 Javascript 编辑内容。这工作正常。不起作用的是使用 Javascript 编辑样式。为什么会这样，如何使用代码编辑 Web 组件内的 CSS？

模板看起来像这样

只有一些 HTMLElements 支持约束验证 api（例如，HTMLButtonElement）。我想创建一个自定义 Web 组件，它也支持约束验证 api。

下面给出了期望结果的示例：

custom-form-component可以调用setCustomValidity自身（基于相应的用户输入上下文）并验证自身的真假。因此，对 的调用form.checkValidity()应该根据 的结果返回真或假custom-form-component。

正如我从文档中发现的那样（例如在 MDN 上），只有某些元素可以附加影子根。表单元素是不可能的。但是，只有表单元素支持约束验证 api。

具体问题：如何实现支持约束验证api的自定义Web组件？