问题标签 [native-web-component]

我刚刚遇到了一个有趣的情况，我在<button>放置在<form>.

我也有一个<button>作为直系子女的<form>。

孩子<button>使表单提交。

但<button>在 shadow-root 中没有。

在某种程度上，我想这是有道理的。但是有没有人想出一种方法来告诉 shadow-root<button>可以正常工作，<form>或者这是我必须通过 JS 处理的事情？

我知道点击事件在 Shadow DOM 层被阻止，但令我惊讶的是，没有办法让按钮仍然是表单的一部分，可以通过属性或属性进行设置。

当然，我可以捕获单击事件，然后从中发送一个新事件，this但这不会做同样的事情，因为我的事件将不再是用户生成的，并且有大量与之相关的规则。

我想在 web 组件中使用非常好的 Tabulator ( http://tabulator.info/ ) javascript 表。

但是，看起来主 Tabulator 实例只能通过这样的 html 选择器创建：

不幸的是，看起来#example-table在 webcomponents 的 shadowDom 中不可见：

还有另一种实例化 Tabulator 表的方法吗？

任何帮助深表感谢。

我花了一些时间搜索，但只看到太多常规的“walk the DOM”博客或答案，它们只升级了一级getRootnode()

伪代码：

HTML

标准element.closest()功能不会穿透阴影边界；

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

目标：

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

必需的：

一个（递归）.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

更新

这是来自以下答案的 UNminified 代码：

更新#2

我将其更改为 BaseElement 上的方法：

我想知道我是否在正确的轨道上

目标：需要确保所有元素最终都在 shadowDOM 中

所以手动创建的 HTML 文件

在light DOM 中创建卡片<cardts-pile>

如果我然后将它们移动到 shadowDOM（当然）：

►<cardts-card>从 DOM 中移除（触发disconnectedCallback()）
►<cardts-card>再次添加（触发connectedCallback()）

[请参阅下面的运行代码狙击手的 console.log]

我card.connectedCallback()
在“重新连接”上有更多花哨的代码，它基本上再次触发了完全相同的代码。

问题

1. 是否可以在不更改 DOM 的情况下移动节点？

2. 是否有 OOTB 代码来检查现有 <cardts-card>的是否仅被移动，
   因此connectedCallback知道它不需要再次运行代码。

3. 我应该做一些不同的事情，
   让那些 lightDOM 元素立即进入 shadowDOM 吗？

我尝试使用 Web 组件（带有验证和服务器通信）创建我自己的自定义 DOM 元素。我正在关注 MDN 上的教程：https ://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements

我能够接收属性的变化。但是，如果我有一个文本框，其中的值会发生变化。如何将文本框的值绑定到属性？这甚至是一个好方法吗？

这是我的代码：

稍后，我想在“PopUpInfo”中添加多个 html 控件。该名称稍后将类似于“Controlunit”。

嗨，我是 Web 组件概念的新手。我想知道我们是否可以使用 shadowRoot.querySelector 访问开槽元素

我已经实现了一个输入字段作为插槽，用于动态设置一些值。并添加一个类“列标题”。我正在尝试像这样访问 connectedCallback() 中的这个元素

var titleInput = this.shadowRoot.querySelector('.column-title')

但它返回null。

请帮忙。

我想用 Shadow DOM 创建一个自定义输入

应该可以通过js改变显示的文本框的值。如果我更改.value文本框的属性，值的设置器不会被调用？我错过了什么吗？

稍后我想通过我的解决方案中的模板包含文本框，并能够通过设置文本框的值textbox.value ="Peter"

我尝试通过 Web 组件创建自定义文本框

稍后我想将自定义输入嵌入模板并在添加之前更改其值：

但是如果在我的代码中执行此操作，则输入的值将保持在“Init”上，但我的自定义控件的值将具有属性“tb value has been changed before adding”。

从 HTMLInput 扩展会更好吗？设置的例程也只触发一次。

当点击 .i div 获取正在触发的文档 ekey 时，如果我省略了文档 eKey() 函数，我希望触发类 ekey() 我得到了函数 eKey() 未定义

我想用 Web 组件创建自己的一组 HTML 元素，它们都包含一些基本功能。我想从输入开始，似乎有两种可能性：继承自HTMLElement或从HTMLInputElement.

选项 A：

选项 B

我对选项 B 的问题是，我没有 main class，我可以在其中定义基本功能。另一方面，我必须为原生输入和选择元素提供的功能重写选项 A 中的代码。

我是否忽略了某些方面？