我们前几节lwc的内容，可能会看到 lightning-input / lightning-button等组件，这些都是lwc已经封装好的组件，那么我们如何去找到它并且更好的了解他们所可以实现的功能以及限制呢？

在搜索他们以前，先看一下lightning下可以看到的他们的影子，如下图所示：

• lightning-card：展示一个盒子样子的区域
• lightning-button-group：展示一组button
• lightning-datatable：展示一个列表
• lightning-menu：展示一个带下拉列表的menu
• lightning-button-icon：展示基于icon的按钮

当然，上面可能还有一些我们没有整理到，我们会看到，lwc的组件好多都在系统中拥有我们常见的身影，我们访问下方文档的lwc组件以及lwc文档链接，查看左侧的lightning Web Component区域即可看到目前lwc已经封装好的组件的所有信息。如下图我们进行简单的介绍。

• COMPONENTS：当前lwc已经封装好的组件；
• Example：当前组件的官方的一些样例，包括不同场景的UI展示以及简单代码介绍(不是所有组件都包含 Example这个选项卡)；
• Documentation：针对这个组件的详细描述，比如当前组件实现自哪个lightning design system中的蓝图，当前组件的扩展性，当前组件限制以及细节使用等信息；
• Specification：当前组件封装的属性信息以及内置的方法。

建议在学习这些组件时，先基于Example选项卡查看当前组件可以实现的UI效果，然后仔细查看Documentation内容，可以让你更加深入的学习和了解这些知识。

除了这些组件以外，我们会发现官方的demo中好多都会有一些css，或者针对 button-icon等组件会引用一些icon信息，这些内容是哪里来的呢？ 答案就在 lightning design system中。基于开发角度，我们可以主要看三部分：

• Component Blueprints：组件的蓝图，目前lwc的封装好的组件都是基于蓝图进行制作，如果目前的lwc的组件无法实现功能或者目前还没有封装好的组件但已经在蓝图中，我们可以基于UI以及样式进行快速使用，同时也可以对已经封装好的组件可以修改的样式进行注入；
• Utilities：提供了一些css样式，比如字体，表格，布局等；
• Icon：提供了可快速使用并且贴合salesforce主题的图标。

参考文档：

lwc组件以及lwc文档

Components - Salesforce Lightning Component Library

lightning design system