Material Web 组件与 Material 组件 Web答案

【问题标题】：Material Web Components vs Material Components WebMaterial Web 组件与 Material 组件 Web
【发布时间】：2019-09-02 06:16:45
【问题描述】：

Material Web Components (link) 和 Material Components Web (link) 之间有什么区别吗？

Material Web Components 除了

之外没有太多解释

建立在 Material Components Web 项目和 LitElement 之上， Material Web Components 支持可靠的开发工作流程构建美观实用的 Web 项目。

而 Material Components Web 是

Material Components for web (MDC Web) 帮助开发人员执行材料设计。由工程师和用户体验核心团队开发 Google 的设计师，这些组件可实现可靠的开发构建美观实用的 Web 项目的工作流程。

它只是在 LitElement 中使用 Web 组件重新实现所有 MDC 组件吗？

关于 Material Web Components 的文档目前非常稀少，因此很难在测试应用程序中使用它们进行比较。

顺便说一句，这个命名糟糕，希望他们在预发布期间更改名称。

【问题讨论】：

如果您查看如何使用它们的示例，您会发现其中的不同。一个提供您可以使用的实际 Web 组件（Material Web Components），例如 <mwc-button raised label="raised"></mwc-button>，而另一个提供您可以应用于标准控件（Web 的 Material 组件）的样式，例如 <button class="mdc-button"></button>
是的，这就是我在 LitElements 中使用 Web 组件重新实现 MDC 的意思。还有其他区别吗？

【解决方案1】：

Material Components Web Components 项目 (link) 建立在 Material Components Web 项目 (link) 之上，以创建 自定义元素 (link)。

使用 Material Components Web 时，您必须在网页中包含项目提供的 CSS 和 javascript。

Material Components Web Components 使用自定义元素规范定义新的 HTML 标记。此类标签的示例有<mwc-drawer>、<mwc-icon>。

新标签是自定义元素，完全独立。 CSS 和 javascript 是组件的一部分，与页面的其余部分隔离。

【讨论】：

【解决方案2】：

只是快速浏览了一下两者。

理论上，如果两个项目都遵循 Material Design 标准，它们应该做的基本相同。

但无论如何，实现似乎不同。

material-components-web 不使用 custom elements，而 material-components-web-components 使用。

material-components-web-components 使用 web 组件，而 material-components-web 没有。

所以我会选择 material-components-web-components。

【讨论】：