问题标签 [stencil-component]

我已经使用 starter 项目创建了一个 stenciljs webcomponents，我正试图通过package.jsondependecy将它抓取到另一个 stenciljs 项目中，它指向一个 git repo。

webcomponent 被导入，但是当我尝试在 tsx stenciljs 项目中运行该组件时，我注意到以下内容：

• props 没有传入，css 我可以看到它被应用了，但是内容不见了
• 如果我在页面上添加一些额外的东西，比如字符或其他东西，开发服务器会呈现 web 组件（也尝试构建项目，相同的行为）
• webcomponent还包含一些.svgspush into .tsxfiles into return语句，即使在页面上添加了一个字符，这些图标仍然不渲染

不确定我是否在这里做错了什么，很奇怪的是，只要我在页面上添加其他内容，除了那个 web 组件，它就可以正确呈现。

我通过以下方式将 webcomponent 导入到 stenciljs 项目中的组件中：

import 'my-component-from-git' <-- 指向 node_modules 文件夹中的 webcomponent 文件夹

stenciljs webcomponent 配置：

stenciljs 项目配置：

我创建了自己的自定义按钮，如下所示

并在 stenciljs 的另一个组件中像这样使用它

问题是虽然按钮是disabled，即使我试图阻止默认，onClick 仍然发生并被this.startClick调用

我该如何解决这个问题？

我使用 StencilJs 创建了一些 Web 组件并将它们发布到 npm。如何在 ASP.NET core 中使用这些组件？

我正在尝试从另一个 FW 获取 StencilJS Web 组件类中定义的所有属性，该 FW 类似于 React 但专有（所以很遗憾我无法发布工作片段）。

这是在 Stencil 组件类的源代码中定义道具的方式：

我在 Stencil 文档中的任何地方都找不到如何获取这些道具的列表。在输入中，我有它的 ref 或通过函数中的 simple 获得的节点document.querySelector元素componentDidMount。

关于如何实现这一目标以及是否可能的任何想法？

谢谢你。

我有一个在 Vue 3 中使用的 Stencil 组件库。

我的一个组件有一个道具，允许某人在其中动态使用自定义元素：

当我传递另一个 Stencil 组件的名称时，这非常有效，但我试图传递一个 Vue 组件。那有可能吗？

我在我的项目中使用模板框架来创建组件。项目结构是树基意味着子契约也有子组件。我在很多地方都使用过自定义事件。

我担心的是，当我使用参数监听事件时target:body，代码会执行两次，因为我在单个页面上使用了两次相同的组件。我创建了示例组件来显示问题/关注点。

主要组件代码片段

子组件片段

使用组件的html页面

似乎这段代码是两次监听事件的罪魁祸首 @Listen('nameClick', { target: 'body' })。

用于演示的 Gif

提前感谢您的帮助！！

我正在尝试学习 StencilJs 并创建了一个像这样的“可编辑文本”组件。

问题是，如果父组件更新，那么它也会更新并componentDidUpdate运行，在不应该的时候设置焦点。有没有一种方法可以告诉（可能通过自定义装饰器）componentDidUpdate 仅在从该组件中触发更新时才运行？或者还有其他方法可以解决吗？

我不能在这里提供太多信息（因为真的没有），但只有这个：

突然间，在向模板组件添加@Method功能后：

该组件停止编译并出现以下 - 非常无用 - 错误：

注意事项

• 错误消息中的返回类型Promise<void>以红色突出显示
• 在这个组件中还有其他@Methods 可以工作（即使返回类型相同）。
• “破碎”@Method在结构上等于那些起作用的。
• TypeScript 编译器不会抱怨任何事情
• 只有模板编译器失败

我已经试过了...

• 谷歌这个问题 - 没有找到这个问题的任何提示
• 删除async并添加return Promise.resolve()
• 重命名方法（我的意思是..为什么不）
• 将方法移动到课堂上的另一个地方
• 删除整个方法（编译好的 x( )
• 删除@Method装饰器（已编译，但当然我的方法已从 API 中删除）
• 删除node_modules文件夹并重新安装

我记得我曾经遇到过这个错误，显然我以某种方式修复了它（或者没有，idk）。但如果我这样做了，我不记得是怎么做到的。

有谁知道如何调试这个 - 甚至更好的修复？

我正在使用 Stencil.js 创建一个无线电 Web 组件。

Stencil.js 代码：

我传递了一个无线电类型的输入。在 Angular 中的用法：

当我单击它时，我希望它应该从“输入”<input name="fruits" type="radio" id="banana">变为<input name="fruits" type="radio" id="banana" checked>.

但是即使一切都正确呈现，输入也永远不会得到“检查”的属性。我究竟做错了什么？

我正在尝试在模板项目中使用 DI tsyringe。对于 tsyringe，它需要在任何代码之前全局加载一些 polyfill 组件。所以典型的用例如下：

对我来说，这种全局初始化的模板项目中的好候选看起来像是 globalScript 配置选项。所以我调整了 stencil.config.ts 如下：

我将样本从 tsyringe 移到 globalinit.ts 中，但在加载过程中失败。tsyringe 抱怨 polyfill 未加载。如果我查看生成的 js，看起来 tsyringe 实际上包含在 polyfill 之前。任何想法为什么会发生？