问题标签 [stencil-component]

我们最近进行了模板升级，并在 prod 构建包（模板构建）中发现了样式问题。使用 --dev 参数（模板构建 --dev）进行构建时工作正常。

我做了更多的研究，发现了样式标签的区别。在开发版本中，我可以看到样式标签出现在我的影子 dom 下，因为它出现在模板以前的版本（0.15.x）中。但是在 prod 构建包中，样式标签丢失但样式正在被应用。我可以理解模板正在禁用在产品构建中修改的样式。但是行为不应该改变。

代码示例

模板构建结果 -

模板构建--dev

我们有使用 Angular 构建的应用程序，现在针对所有客户特定的要求，我们希望使用模板 js 构建 Web 组件。

想法是保持核心应用程序的清洁，而不是为特定的客户需求混合代码。

所以我们提出了 Web 组件，并坚持使用 Stencil JS。

我们面临的第一个问题是我们的 Web 组件还需要使用 jquery、bootstrap js 和一些第三方 js。

我们希望构建我们的组件以从外部封装，这意味着它们将处于 shadow dom 中。

现在我有两个问题

1) 每个组件都包含 jQuery、bootstrap js 等 JS 库是否是一种好习惯，因为在我看来这不是一个好主意 2) 我们如何将 jQuery 例如包含到 Web 组件中。

我尝试了很多方法，最后一种是在模板 Web 组件的构造函数中包含标记，但它不起作用。

所以问题是如何在shadow dom中内置的模板中使用JS第三方库（shadow选项设置为true）

欢迎对此提出任何意见，我们将不胜感激:)

我没有让我的标签在我的 Vue 项目中工作。我创建了一个 Stencil.js 组件测试，它只是您创建 Web 组件时来自 stencil 的原始代码。我已将它作为公共包上传到 NPM。

所以现在应该只是在我的 vue 应用程序中安装和导入包，但我不能让它工作。（Vue 应用程序只需使用 Vue CLI 构建并具有打字稿）

当我这样做时，npm install stencil-component-test --save我可以在我的 node_modules 中看到代码，这样就可以了。

我尝试在我的 Home.vue 中导入和使用它

如果我查看 chrome dev-tools，它只是一个空标签。我究竟做错了什么？

按照此处的 Stencil 文档，我在 src/global/variables.css 中创建了一些全局 CSS 变量。这是目前该目录中唯一的 CSS 文件。

我正在尝试在 React 中使用我的组件。当在 Stencil 项目中开发以及将 www/build/ 目录复制到 vanilla JS/HTML 项目时，组件/CSS 变量工作得非常好，但当我在 React 中导入和使用它们时却不行。组件工作并清晰呈现，但 global/ 目录中的 CSS 显然没有呈现。

在组件 CSS 文件中定义和使用 CSS 变量有效，但不适用于全局 CSS 文件。

我猜我的构建方式有问题，但我不知道我做错了什么。

我已经尝试更新到最新的 Stencil 版本并更新了所有其他包。

我也尝试添加：

但这也没有用。

它仅在添加引用 UNPKG CDN 的 CSS 标记时才有效，如下所示：

<link rel="stylesheet" type="text/css" href="https://unpkg.com/uwe-ds-poc@0.0.9/dist/poc/poc.css"/>

但如果我尝试执行这样的本地路径，则会失败：

<link rel="stylesheet" type="text/css" href="../node_modules/uwe-ds-poc/dist/poc/poc.css"/>.

这是唯一/最好的方法还是我缺少什么？

这是我的 stencil.config.ts：

copy 属性将全局目录复制到 dist/collection/。这也不能解决问题。

这是我的 package.json：

整个 Stencil 项目都在这里。

提前致谢。

我有一个要为其设置字体的模板组件。我现在拥有的：

索引.html

当我在本地启动组件时，这会设置字体。但我想在 Vue 应用程序中使用该组件（从 npm 导入）。那里的自定义字体不起作用。有没有另一种方法来实现这一点。

我在 Stenciljs 中创建了一个新项目，但在使用该项目中创建的组件时遇到问题。

我需要在另一个容器组件（Carousel）中使用这个组件，但是我遇到了以下问题：

作为此问题的解决方案，VSCode 告诉我可以导入该组件，但是当我这样做时，我收到以下错误：

我正在使用 Windows 10。有人发生过吗？我很欣赏你的评论。

我有一个 Stencil 组件，作为其业务逻辑的一部分，我需要使用外部 Javascript 文件mylib.js。Javascript 文件包含 Stencil 组件应该使用的一些业务逻辑。

这是我的组件：

我不断收到错误

TypeScript 找不到模块“src/js/mylib.js”。

我试过了：

无济于事。

该mylib.js文件位于js文件夹内。在线文档根本没有提到如何导入外部库。我已经成功导入了 moment.js，但这只是因为我首先通过以下方式安装了它：

然后通过执行以下操作将其导入组件中：

我还尝试通过在 index.html 中引用外部 JS 库来“导入”它

该库在组件外部可用，但在组件内部不可用

我正在尝试使用模板 js 为 Table Element 创建一个自定义组件。但是当我创建一个组件时，输出不是我所期望的。

我在 html 文件中使用上述组件，如下所示。

现在当我检查 html 文件时。<th>元素没有出现。

当我检查自定义组件时，我看到了类似的东西。<th>不是包装内容。

我在这里想念什么？

我正在创建一个自定义select表单控件，当它有状态时disabled我需要跳过focusin和focusout事件。

没有禁用验证的这段代码不起作用，focusin仍然发出。

当用户向下滚动产品页面时，我正在尝试实现添加到购物车粘滞栏。

除了产品的“默认”值有效外，一切似乎都运行良好。当我选择让我们说颜色红色和尺寸大并单击粘性添加到购物车时，我将被重定向到具有该产品默认值的购物车，例如中黑色。

我无法解决如何解决这个问题。

所以这是我的代码；

我使用的值与标准 CTA 中的值相同：

但我想我必须以某种方式将动态组件与 JS 联系起来，在上面的原始产品选项中选择了什么？

因为当我尝试删除这个 div 时：

它甚至没有将我重定向到购物车，但是当 div 存在时，它会将我重定向到具有“默认”设置的购物车。

有没有人有这方面的经验，我将不胜感激。不太确定这里是否需要 JS，或者我可以在没有它的情况下处理它。

谢谢你。祝你今天过得愉快！