问题标签 [native-web-component]

在这里查看：https ://jsfiddle.net/jdvivar/h1x2vs3u/

创建一个自定义标签my-component，附加一个影子根，并在其中复制采用的样式表。我认为它应该使用正确的字体呈现内容，但事实并非如此。仅应用颜色样式。你知道为什么吗？

我是一名 Web 开发人员，最近开始使用基于 Web 组件的 Ionic 4。我试图编辑组件的 CSS，但我无法编辑相同的内容，后来发现这是因为 Web-Components 确实有 #shadow-root。

我的问题是，有没有办法编辑 Web 组件的 CSS 和 JS。如果没有，为什么会在那里？

在我看来，同样的缺点是： - 无法将自定义 CSS 应用到组件的子组件中。- 像 Stylus 这样的插件将毫无用处，因为不会应用 CSS，我们将无法获得暗模式。

我有一个 webcomponent 项目，我通过一个非常简单的设置进行了设置，但我想使用 open-wc。在为 webcomponent 搭建一个项目后，我注意到我的依赖项如下所示：

似乎没有对各种工具的直接依赖，而是附加了一层依赖（即@open-wc/eslint-config, @open-wc/prettier-config, @open-wc/demoing-storybook）。

为什么需要额外的层？为什么我不想直接依赖这些工具？对于一些人来说，有直接的依赖关系（即eslint），但对于另一些人来说，他们是通过那个额外的层来的（即故事书、更漂亮的等）。

我在理解整体设置方面有点困难。

看起来 mdi 在 Web 组件中不起作用，还是我错过了什么？

我想开发一个封装其依赖项的 Web 组件，将链接添加到父文档的工作原理，但它违反了初衷。

https://codepen.io/Jamesgt/pen/MWwvJaw

根据下面的代码片段（并在此处找到），材质库根据mwc-icon的文本内容设置组件样式。查看此处找到的mwc-icon的源代码后，似乎没有任何 javascript 逻辑直接进行样式设置。不知何故，这似乎发生在 css 或字体定义本身中。

图标是如何应用/呈现来代替文本的？

我是 Vue.js 的新手，想使用它制作 Web 组件的 SDK。我可以像这样制作一个 Web 组件：

主.js：

命令行命令：

但这仅适用于单个组件。如何构建一堆 .vue 文件以一次将 Web 组件分隔在单独的 js 文件中？

如何在构建后自动生成包含其中所有组件的测试 html，以便在 dist 文件夹中进行测试？

谢谢

我正在尝试使用 Vanilla JS 中的 Web 组件编写一个简单的游戏。但是，在重绘画布元素时我遇到了一些麻烦。第一次调用总是很好，它像我想要的那样画了一个圆圈，但是当调用 requestAnimationFrame(draw) 时，所有属性都变得未定义。为什么会这样，我该如何解决这个问题？这是我的代码

我得到的错误是： Uncaught TypeError: Cannot read property 'ctx' of undefined at draw (script.js:24)

我有一个 Web 组件，我想调整其插槽的值。

不幸的是，我无法从中获得解析值。

我怎样才能做到这一点？

在 webcomponents 中，我们有两种类型的插槽（命名插槽和默认插槽）。我们可以使用 syntax 轻松地设置命名槽的样式slot[name]::slotted(*)。但是有什么方法可以设置默认插槽的样式，因为它们没有任何关联的名称？

代码是这样的，我正在使用 Angular Elements。

由于原生 html 元素的许多限制，我想知道是否可以使用 Web 组件扩展原生 html 元素并拥有自己的自定义行为。我已经看过有关此的页面，但是示例非常简单且薄弱，例如为锚标记添加确认。我不是在谈论添加一些简单的东西，我想修改行为。我希望数据列表始终显示所有选项元素，甚至有我自己的过滤逻辑。我永远找不到这些本机元素的实现代码，所以我无法尝试。

创建自定义元素不是一种选择（除非用于扩展本机元素）。在我的公司，我们将 openfin 用于小型 Web 应用程序。我们使用原生数据列表，因为我们需要我们的元素能够扩展到视口边界之外（自定义的东西会被剪掉）。