问题标签 [native-web-component]

slot制作一个可重用的 web 组件很好，但是到目前为止它有一个限制。我面临的是风格问题。您只是无法在组件内部定义样式，即使您知道注入内容的结构是什么。

从我在 github 的帖子中找到的详细信息

我编写了一个组件，并尝试slot从外部注入内容并尝试为组件影子根中的特定内容添加样式。 演示

HTML 文件

JS文件

但是，它不能直接工作，因为您不能为::slot(simple_selector) 原因使用复杂的选择器

我找到了一个间接的解决方案，那就是将外部内容重新附加到组件影子根内的插槽中。 演示

HTML 文件

JS文件

好吧，它适用于定义了 slot 属性的内容，但不适用于没有 slot 属性的内容。

在这个项目中，我正在尝试创建一个自定义组件，该组件将充当地图。我仍在通过 W3C 文档和几个 Youtube 视频学习 Web 组件的基础知识。

主要问题是，在组件类中有一个调用的函数attributeChangedCallback()，每当其中一个属性更改时都会触发，这些属性包含在observedAttributes()函数中，并且在设置它们之后（前面提到的函数）我尝试访问shadow DOM（即声明connectedCallback()将在组件加载到 HTML body 元素中后触发）通过选择器。但是，如果我这样做，变量内容为空。

attributeChangedCallback()应该在加载内容之后加载，所以我不明白为什么会发生这种情况，每次属性更改时我都需要访问这个元素，以便我可以更新它的内容。奇怪的事实：如果我每次attributeChangedCallback()执行它都会记录两次（因为我有两个属性被监视）。

这是片段：

更新

就像@acdcjunior 在更改this.createShadowRoot();为this.shadow = this.attachShadow({mode: 'open'});（从ShadowDOM v0 到v1）之后提到的那样解决了我的问题，因为该connectedCallback()函数在幕后执行并且只执行一次。

我知道规范目前只允许::slotted 的复合选择器，即::slotted(my-first + my-second)不允许，但是这样的东西应该工作吗？

有什么方法可以定位开槽的兄弟姐妹（除了全局 css）？如果没有，我会在哪里提出这样的请求？谢谢。

这可能有点令人困惑。我正在尝试从我的自定义元素访问 innerHTML 或 childNodes。是否可以从 Web 组件导入文件中访问原始 DOM 结构？在附加阴影之前？

在下面的示例中，我试图从我的 jookah-gallery 导入文件中访问两个 jookah-images 的 src。

免责声明：当谈到影子 DOM 和 Web 组件时，我完全是个菜鸟，所以如果有任何重大错误，我很想了解原因。谢谢你的帮助！

索引.html

jookah-gallery 的导入文件：

我可以为命名槽使用 tr（表格行）吗？当我使用 tr 作为插槽的后备内容时会发生什么？

像这样：

codepen 中的示例代码https://codepen.io/JJia/pen/odXrWJ

我在不使用任何第三方库（例如 Polymer）的情况下迈出了Web 组件的第一步。主要卖点之一是 Web 组件样式与其他地方定义的样式分开，允许在类似沙盒的环境中设置组件的 shadow-DOM 样式。

我遇到的问题是样式如何通过开槽元素级联。由于带槽的元素不是 shadow DOM 的一部分，因此只能使用::slotted()组件模板中的选择器来定位它们。这很好，但是几乎不可能保证 Web 组件在所有上下文中都能正确显示，因为外部定义的样式也以不可战胜的特殊性* 应用于开槽元素。

*此外!important。

这个问题可以归结为：

我很难理解这个“功能”的价值。我要么必须以其他格式指定我的链接并使用 JS 创建它们的节点，要么添加!important到我的颜色属性中——当涉及到我尚未定义的任何其他属性时，这仍然不能保证一致性。

这个问题是否在某个地方得到了解决，或者通过改变我的轻 DOM 结构很容易解决？我不确定如何将链接列表放入插槽。

我们如何解决 Firefox 中的 Element.shadowRoot ，因为它尚不可用？

关于 Element.shadowRoot https://developer.mozilla.org/en-US/docs/Web/API/Element/shadowRoot

我试图创建一个 Web 组件。该组件刚刚取得了进展。以下是我的代码。

我想通过 my-element 的值来控制进度值。

我设置了一个值my-element(<my-element value=50></my-element>)但是它不起作用，我不知道如何通过js设置值。

我猜问题出setValue(val)在我的MyElement课堂上，但我不知道如何实现它。

有人可以帮助我吗？谢谢！

现在，如果您遵循自定义元素规范 v1的确切规范，则无法在不支持类的浏览器中使用自定义元素。

有没有办法在不使用类语法的情况下创建 v1 自定义元素，以便它们在 Chrome、FireFox 和 IE11 中完全正常运行。此外，由于 IE11 没有对自定义元素的原生支持，我假设我们可能需要使用一些 pollyfill，那么我们需要哪些 polyfill 或库才能在 IE11 中使用？

我已经搞砸了 Polymer 2、Polymer 3 和 Stencil，但对于我们想要创建的一些东西来说，它们都有点繁重。

这个问题似乎在正确的轨道上，但我在 IE11 中使用它时遇到了一些麻烦，那么我如何在 IE11 中使用 Reflect.construct 来实现自定义元素？

我有一个自定义 Web 组件，<app-list>我正在尝试将其扩展到<calcs-list>.

在 calcs-list.html 我有：

但是，我得到了错误

未捕获的 ReferenceError：AppList 未在 calcs-list.html:11 中定义

第 11 行参考class CalcsList extends AppList {

这两个文件是同一个文件夹的兄弟。app-list.html我在导入时尝试使用绝对路径，calcs-list.html但得到了相同的结果。

我还尝试将这两个组件导入到我的主 index.html 文件中：

但体验相同的结果。

该app-list组件在我的应用程序中运行没有任何问题。

我在这个问题上摸不着头脑，因为 Web 组件是相当新的，在线上没有很多故障排除信息，尤其是 Web 组件 V1。

谢谢！