问题标签 [native-web-component]

我有一个自定义输入框，它继承自HTMLInputElement：

我能够做到以下几点：

1. 在输入中输入“测试”

   (tb.value && tb.value..attributes["value"])==="test

2. 更改属性值以更改属性

tb.attributes["value"].value ="test" -> tb.value ==="test"

但我不能执行以下操作：

我认为解决方案是覆盖类的 get value() 和 set value(value)。但我没有任何成功。

我正在尝试将本机 Web 组件用于我的一个 UI 项目，而对于这个项目，我没有使用 Polymer 等任何框架或库。我想知道是否有任何最佳方式或其他方式在两者之间进行通信Web 组件，就像我们在 angularjs/angular 中所做的一样（比如消息总线概念）。

目前在 UI Web 组件中，我使用dispatchevent发布数据和接收数据，我使用addeventlistener。例如，有 2 个 web 组件，ChatForm 和 ChatHistory。

请让我知道为此目的还有哪些其他方法。任何可以轻松与本机 UI Web 组件集成的好库，如 postaljs 等。

我有许多位于不同应用服务器中的 Web 组件（HTMLElements 的 JS 模块）。它们都被组合（导入和使用）在一个主 ui 应用程序中，该应用程序将这些 Web 组件一起使用。问题是，从这些外部 Web 组件导入到主 ui 应用程序的 Ajax 调用将从主 ui 应用程序主机调用，而不是从 Web 组件外部 URL/主机调用。

我可以让导入的 Web 组件在执行自己的外部 Ajax 调用时使用它们的远程主机而不是导入者（主 UI 应用程序）的本地主机吗？

我想开始利用http://webcomponents.me W3C 标准，现在所有主要的 Web 浏览器都支持该标准。

我研究了互联网，到目前为止，我发现了以下框架：

1. Stencil - 由离子创建。所有 ionic 组件都使用此框架/编译器来构建原生支持的 Web 组件。

2. lit-element - 由 Google 创建，是 Polymer 框架的一部分。

3. SkateJS - 不知道这背后的原因，但它是前 3 大流行的 Web 组件框架。

有人可以给我建议或意见哪个框架最好？

我正在处理一个使用 React 和 Typescript 的项目，但我想开始在我的项目中使用本机 Web 组件来逐步淘汰我的一些 React 组件。

当我尝试在我person-info的一些 JSX 中包含使用组件时出现此错误。

我已经查看了其他一些存在这些问题的问题，但它们似乎都与本机 Web 组件无关。

当我在项目中使用 Web 组件时，如何让 Typescript 和 React 正常运行？

个人信息.mjs

进口声明

JSX 中的用法

在创建 vanilla JS web-components 时，我试图找出一种将模板 html 保留在 JS 文件之外的方法，最好是在单独的 HTML 文件中。

我确实研究了本机 JS Web 组件实现的多个实现，特别是这里，单个文件和一个非常好的文章。

所有实现最终都使用字符串文字或类似方法将 html 模板放入 JS 中。我的问题是，是否可以制作两个单独的文件，例如 my-component.html模板和my-component.jsJS 代码？

我已经看到这种方法在 Aurelia 框架中运行良好，它非常干净并且将代码保留在它所属的位置。

我尝试使用 html 导入，通过为模板创建一个 html 文件并在其中包含 js。

理论上应该可以工作，但浏览器已经放弃了 html 导入。

我的第二种方法，这对我来说似乎有点 hack，但它确实有效的是从服务器中提取模板 htmlconnectedCallback

从服务器端我只是返回纯 html

<template>请注意我是如何在来自服务器的响应中完全 跳过标签的，显然如果我使用<template>标签，我将不得不使用 dom 解析来实际将 html 放入 dom。

这确实有效，但它看起来很hackish。

有没有人有更好的方法？

我正在学习 Web 组件（本机和框架）。是否可以像在 Vue.js 中那样将属性注入本机组件？

这是 my-component.js：

这是 index.html：

最近我正在实现一个带有 HTML Web 组件的轻量级 vanilla-JS 库，仅供公司内部使用。

我在 JavaScript 中有一个关于在父容器中调整客户端元素大小的行为问题。

这是我的测试 HTML 文件，用于在小型测试场景中重现该行为：

我还创建了一个相应的JS fiddle。

容器包含两个嵌套的 DIV 元素，以在容器的外部边界和内部（客户端）边界之间创建一种硬编码的边距。

当使用 JavaScript 通过按下容器下方的调整大小按钮来调整客户端（子）元素的大小时，HTML Web 组件实现的行为与经典（仅 light-DOM）实现不同。

我认为这与 JavaScript 确定的父元素有关。对于经典实现，客户端的父级将是内部 DIV。但是对于 HTML web 组件的方法，它似乎是 web 组件本身......

我可以在 JavaScript 中做些什么来让我的 HTML Web 组件的开槽子元素使用 JavaScript 关于 Web 组件中的 shadow-DOM 父级而不是 light-dom 父级（作为 Web 组件本身）来（重新）调整大小？

编辑：

我想我需要稍微澄清一下我的问题的背景。

我容器中的客户端将是可拖动的（使用拖动手柄元素，如标题栏）和可调整大小（使用调整大小手柄，如右下角的三角形）。

拖动和调整大小应该可选地绑定到容器的客户区域（= 内部 DIV 的客户区域）。如果“bound”选项为真，则不允许客户端越过容器的（内部）边界。为此，拖动和调整大小行为的 mousemove 事件处理程序将需要在客户端边界上相对于容器的内部客户端区域执行计算。

所有这些拖动和调整大小的逻辑已经到位并适用于仅适用于经典 light-DOM 的解决方案，但是当在 HTML Web 组件容器实现中为客户端元素实现此逻辑时，事件处理不会将 shadow-DOM 的内部 DIV 容器识别为客户的父母进行边界检查；它改为使用整个容器的客户区域。

在我的示例中，我试图尽可能地隔离和简化这个技术问题。

我的示例中的客户端元素最初已经正确最大化到容器客户端区域的 100% 高度和 100% 宽度（使用分配的 CSS 类）。

我的测试示例中的按钮只是添加了一些具有绝对值的覆盖内联 CSS 样式，这应该会在视觉上产生相同的“最大化”客户端大小。

这种逻辑似乎适用于普通的旧 light-DOM 解决方案，但不适用于 HTML Web 组件的 shadow-DOM 解决方案。在后一种情况下，JavaScript 大小调整逻辑不会分配 Web 组件内部 DIV 的 clientwidth 和 -height 尺寸，而是整个 HTML Web 组件的 clientwidth 和 -height 尺寸，太大，导致明显溢出。

所以我需要以这样的方式更正按钮事件处理程序中的 JavaScript 逻辑，它会导致新 HTML Web 组件容器实现中的客户端正确调整大小：设置内联 CSS 绝对值不应导致任何视觉大小变化！

容器的实现和样式可能会动态变化，因此 JavaScript 解决方案不应依赖于容器的特定视觉和/或功能设计。

编辑2：

为了更清楚起见，我想在此处包含一个更准确地模仿我的实际应用程序的代码示例。

复选框“边界检查”将允许完全禁用/启用边界检查。

复选框“旧行为”切换边界检查行为。选中后，它会退回到原始问题。未选中时，它使用我自己的答案中提供的解决方案。

我还没有完全满意，所以我会在短时间内继续寻找其他解决方案。如果有更好的方法来确定/计算 JavaScript 中容器的有效客户端区域，请告诉我。提前致谢。

我正在使用自定义元素，我注意到在一种情况下我无法访问实例的属性，就像在var prop = myCustomElement.myPropery // undefined类中将属性定义为 eg 一样get myProperty() { blah }。

myCustomElement.constructor当自定义元素在脚本 type="module" 中定义与没有模块类型时，我将问题归结为报告的内容（以及原型/实例类型）。

这是一个非常简单的例子：

...并且没有模块类型

这似乎很错误，这种行为是故意的吗？

而且，假设需要使用模块来定义要在更大组件或库中使用的自定义元素，是否有直接的方法来防止模块隐藏自定义元素的类型？

注意：我正在从最新的 Chrome (74.0.3729.157) 测试这个，还没有尝试过其他浏览器。

我有一个正在使用的 Web 组件attributeChangedCallback

我正在为每个动画帧上的两个属性设置新值：此外，这可以增加到设置 4 个属性。

这将触发attributeChangedCallback两次，昂贵的渲染器也会触发两次。

有没有一种有效的方法将两个属性设置在一起，或者将更改的效果作为一个类似于去抖动时间的单个事件？

我对使用setTimeout/有点怀疑，clearTimeout因为它在每个动画帧 60 fps 上调用。

为了提供更好的概述，我的组件看起来有点像：

它使用 webGL 渲染螺旋图，并计划用于生成艺术。我喜欢它的简单性，并且有点不愿意使用 JSON 属性。

此外，spirograph 的动画与组件保持分离，其想法是使用 spirograph 作为静态渲染或更改属性可以轻松地进行动画之类的操作。这里它只是为两个属性设置动画，但它可以针对不同的情况而变化。

此外，还计划添加类似的组件，如果需要，可以通过设置属性来设置动画。

Danny 的建议很有趣，我可以有第三个属性，它可能是来自 requestAnimationFrame 的时间戳，并将其标记为仅用于动画的可选属性。因此，每次更改属性时，我们都需要设置这个额外的属性来实际触发渲染。但这听起来有点hacky/patch。