问题标签 [native-web-component]

我有一个 Web 组件，我可以在我的 main.ts 中使用它，这是我的应用程序的入口点。

主要.ts：

列表组件.ts

我能够将我的代码拆分为 TS 模块。我尝试实现的下一步是为 Web 组件加载 HTML 和 CSS 内容。类似于 Angular 的做法，但使用的是 Vanilla Web Components。我的目标是在 HTML 文件中定义 Web 组件的 HTML 内容，并在 CSS 文件中定义组件的 CSS 样式。

我遵循的教程使用 webpack，我只想用它来解析我的导入（我希望我的 TS 代码与任何捆绑器兼容）

我已经看到我可以通过导入 CSS 文件，import "./css/main.css";但它似乎只适用于 Webpack 的 MiniCssExtractPlugin。同样，对于 Web 组件，样式是全局的，而不是本地的。我可以以类似的方式导入 HTML 文件吗？

是否有“香草”TS 方式来导入 CSS 和 HTML 文件？如果可能的话，我想独立于任何框架和模块加载器。我知道我的结构类似于 Angular，但我只需要基本功能

我在子类中添加了样式部分。

非常简化的版本：

第二个样式部分似乎被忽略了。

这应该可以吗？

更新：如果样式部分未拆分，它可以工作

我正在尝试使用原生 Web 组件，到目前为止我真的很喜欢它们。

我创建了一个微型站点，它有一个主页、关于页面和一个联系页面，以及一个通过更改 URL 的哈希组件来工作的菜单。

但是，我注意到一个不良影响 - 每当我从一个“页面”切换到另一个（实际上，这只是卸载一个本机 Web 组件并安装另一个）时，大约半秒钟，我看到 Web 组件呈现使用默认样式，然后使用我包含在 shadow DOM 中的样式进行绘制。

最初，我的组件是这样的：

我试图通过删除 CSS 导入来解决这个问题，并导入这样的样式：

但是，无论何时安装组件，都会出现一些未设置样式的内容。

如果仅在首次加载某种类型的组件时才发生这种情况，这不会有太大问题，但每次安装自定义组件时都可以看到人工制品。

有没有办法阻止这种情况发生？如果这意味着我可以使用漂亮、轻量级的原生 Web 组件，我什至会很高兴地放弃 shadow DOM 而只使用 BEM！

我听说可以通过使用内联样式来防止它发生，但我不想走那条路……我更愿意将 CSS 保存在一组组织良好的子目录中。

我正在使用 LitElement.js 中的 Web 组件构建一个 Web 应用程序。我有一个包含大多数组件（我们称之为.top）的 div，它指定了网格布局和背景图像。在 div 中，我有一个自定义组件（调用它<custom-container>，它本身由自定义组件组成（调用每个实例<custom-leaf>）。容器还使用display: grid并定义了一个grid-column-gap.

问题：在每个<custom-leaf>嵌套内部之间<custom-container>有一个网格间隙，但是，它是不可见的：它不是“穿透”背景图像，而是显示背景图像。

这是一些代码：

index.html

customContainer.js

我正在使用Web 组件构建应用程序并使用Vaadin Router进行路由。我有以下项目结构：

索引.html

app.module.js（vaadin 路由器）：

到目前为止，vaadin router 显示mp-app-root标签中的每个组件。

当我通过<a>-Tags 调用 URL 时，路由工作正常。但是，如果我将 url 粘贴到地址栏或页面重新加载（例如http://127.0.0.1:8081/meals/1）组件不会加载，我会收到以下错误：

和

我正在使用 web 组件和 vanilla javascript 构建一个项目。

我有一个名为的组件/模块meal.module- 它是组件的父组件，meal-list并且meal-search.

• 膳食列表显示来自 api 的多餐。
• meal-search 包含一个输入字段和 seachterm 作为属性。

餐.module.js

餐单.component

膳食搜索.component

在 seach-component 中，SearchTerm 被配置为属性。每次输入字段更改时，属性也会更改。

现在我想实现一个“searchMeal”函数，它总是在 MealSearchComponent 中的属性发生变化时触发。

我已经尝试将其导入MealSearchComponentMealListComponent。但它似乎确实打破了组件的规则，没有任何依赖关系。

我正在开发一个表示简单表格的本机 WebComponent，行数和列数来自属性。列的宽度（如果固定）。

如果我有 20 列并且列宽 = 150px，我只需要创建尽可能多的列，而无需创建 y 溢出。

这是我创建表格的方式

但我找不到如何从我web-component那里获取父宽度并附加到它的调整大小事件的方法。

因为 web-component 在 shadow-dom 内，我无法真正访问父级，也许我在这里错了，但parentNode总是返回 null。

想法？

我很难解释这一点。我正在构建一个自定义组件，在这个组件中有一个按钮。我需要能够动态设置该按钮的单击操作，以便其操作可以根据上下文进行更改。因此，如果此组件有 2 个实例 a&b，则每个实例都有不同的功能，当单击其中的按钮时会执行该功能。我以为我可以将一个函数分配给组件的属性并从组件内部执行该属性，如下所示：

但是当你运行它时，你会得到一个错误，说该属性action1不存在。

设置允许我需要的灵活性的回调的正确方法是什么？

问题是，如何从子组件调用方法？

例如：考虑我有一个位于父组件中的登录表单组件。因此，当我单击登录按钮时，我需要显示该表单。显示登录表单的功能将编写在父组件中，当我单击位于子组件中的按钮时，我需要使用该功能。

这是父组件

这是子组件

这是我写的Base类（以防万一）

Web 组件（仅针对此问题的自治自定义元素）可以通过多种方式“栩栩如生”。

以下三个选项之间是否存在显着差异？

选项1：

选项 2：

选项 3：

我基于 Karma/Mocha 堆栈编写了一些单元测试，并使用选项 3 创建了我的实例。

这是否足够，这意味着，我可以使用任何一种方法依赖具有相同状态/行为的组件，还是有必要重复我的所有测试并应用所有不同的实例化选项？

document.createElement由于错误，我的一个 Web 组件无法使用实例化：

可以毫无问题地实例化相同的组件这一事实new告诉我，在幕后，必须存在显着差异，尤其是在new FooElement和之间document.createElement('foo-element')。

当然，我可以编写三个通用测试来测试所有三种实例化方式，但这是否足够？

还是应该使用所有 3 个实例化选项来运行我所有现有的测试？

或者换个方式问：

每个实例实例化后是否完全相同？（假设没有错误）