问题标签 [native-web-component]

对于 Stack Overflow，这可能不是一个可以接受的问题，但我不知道在哪里可以问这个问题。

Web Components 已经“即将发生”很长时间了。现在看来，大多数浏览器本身都有大部分必需的部分，而不是使用 polyfills（这总是让我担心）。

我想知道 Ruby On Rails 是否计划迁移到它，或者是否有任何项目创建 Web 组件以及 Rails 服务器代码来利用它们。

我以原生 vanilla JS Web 组件格式创建了这个非常常见的菜单链接场景。

自然，当我单击任何导航项时，我需要

• 使单击的项目处于活动状态/选中状态
• 检查是否有另一个项目已经处于活动状态，如果有，则使该导航项目处于非活动状态

使用 web 组件，我观察到我可以通过两种方式处理它。

方法一：

jsfiddle

• <nav-item>当被点击时发送一个事件
• 在父节点上添加事件监听器<side-nav>
• 在每个点击事件上，循环遍历 side-nav 的所有子组件，如果它不是 event.target 节点，则<nav-item>停用已经激活的组件。<nav-item>

代码<nav-item>

和父母的代码<side-nav>

方法二：

jsfiddle

完全忽略父级并仅在<nav-item>

两种方法都可以正常工作，但对于我的生活，在考虑良好的编程实践和性能时，我无法弄清楚哪一种更好。

我有一个普遍的概念，孩子不应该知道兄弟姐妹或父母，但父母应该管孩子。我对这里的最佳实践有点模糊，很想被曝光。

我正在创建一些 Web 组件，并希望将包含的文本插入到模板槽中。我想让它成为可插入的，而不是简单地复制它们的值，这样浏览器就可以自然地处理对文本的更改，而不必通过组件本身传递它。

根据 MDN，textNodes是可插槽的，但是除了 v1 中已弃用的元素之外，我找不到任何真正的方法来做到这一点。（textNodes 不支持属性，所以我不能简单地以这种方式为其分配一个插槽，并且 .assignedSlot() 是只读的。）文档之外的支持非常少，尽管这是一种新技术的预期.

使用这个作为一个简化的例子，我想出some text现在label插槽中，并在标记发生变化时得到相应的更新。有没有一种好的/综合的方法来做到这一点？我必须求助于mutationObserver吗？

我想要一个接受 N 个孩子的 Web 组件，并以列表格式显示它们。我发现我可以声明 N 个具有相同名称的插槽，它们将被添加为彼此的兄弟，如下所示：

效果很好。但我不想泄露实现细节，所以我一直在寻找其他方法。理想情况下，使用该组件的人只需要提供 N 个元素，并且包装成一个列表将发生在组件本身的内部。

• 更改代码以使模板中有一个<li>内部的<ul>失败微不足道，因为所有可插槽都进入同一个<li>元素。

• role="listitem"在<slot>内部设置<ul>失败，因为在 上设置的属性<slot>没有复制到可插槽中。

• 为每个分配的节点添加slotchange事件侦听器<slot>和设置role="listitem"确实有效，但这意味着 Web 组件正在与提供的节点混淆，这似乎不合适。

• 进入slotchange事件并试图弄乱分配的节点，以便我可以动态地将它们包装在新创建的<li>元素周围，需要我将它们从它们在 DOM 中的位置中删除。因此，它不仅会与用户提供的标记混淆，而且还会触发新的slotchange事件发生。

有没有其他方法可以在不泄露自定义元素的实现细节的情况下做到这一点？

我想创建一个 Web 组件，其中包含可以添加到的元素列表。例如，如果我有一个初始模板，例如：

并且每次单击该按钮时，<div>都会添加一个包含输入字段中的文本的 a，从而创建如下内容：

我想扩展本机按钮元素，但我不确定如何添加样式。在 Google 的示例中，他们不使用模板，因此fancy-button自定义元素本身就是按钮，而不是添加包含按钮元素的模板和阴影 DOM。如果我只是直接向影子 DOM 添加一个按钮，似乎会破坏扩展原生元素的对象，但我不知道如何设置和扩展原生元素的样式。如何创建一个自定义元素，它只是扩展为具有红色背景的本机按钮元素？

我正在尝试创建具有以下功能的 Web 组件：
1. 单击按钮以添加<textarea>元素。
2. 给新建的<textarea>元素添加文字后，该文字被添加到 的对应项中this.list。
3. 在一个单独的脚本中能够获取 DOM 元素，document.querySelector()然后从中检索数据this.list。
这是我到目前为止所拥有的：

我正在构建一个使用该<textarea>元素的 Web 组件，但我无法弄清楚如何让它像本机<textarea>元素一样接受内部文本。

我已经构建了一个名为的本机 Web 组件<expanding-textarea>，它扩展了<textarea>. <expanding-textarea>content goes here</expanding-textarea>当我尝试通过使用 LitElement 中的组件动态设置内容时，我可以设置组件的文本内容，但不能。下面是一个最小的示例，它<textarea>${item.text}</textarea>在重复指令中正确填充文本，但不是按原样填充。

以下代码因控制台错误而失败Uncaught TypeError: node.setAttribute is not a function。如何更改从模板创建的节点的属性？