小蓝xlanll

这个屌丝很懒，什么也没留下！

热门标签

Web 组件相关资源_patternfly design system

作者：小蓝xlanll | 2024-02-18 20:23:14

踩

patternfly design system

GitHub - mateusortiz/webcomponents-the-right-way: This is a guide intended to introduce to Web Components. Everyone can contribute here!This is a guide intended to introduce to Web Components. Everyone can contribute here! - GitHub - mateusortiz/webcomponents-the-right-way: This is a guide intended to introduce to Web Components. Everyone can contribute here!https://github.com/mateusortiz/webcomponents-the-right-way

精选的 Web Components 资源列表。

Web 组件——一套不同的技术，允许你创建可重用的自定义元素——它们的功能被封装在你的代码的其余部分之外——并在你的 Web 应用程序中使用它们。

内容

Web Components the Right Way 由Mateus Ortiz精心制作，由Serhii Kulykov维护

介绍

标准

自定义元素

自定义元素为作者提供了一种构建自己的功能齐全的 DOM 元素的方法。

影子 DOM

Shadow DOM 描述了一种将多个 DOM 树组合成一个层次结构的方法，以及这些树如何在文档中相互交互，从而实现更好的 DOM 组合。

HTML 模板

<template>element 用于声明可以通过脚本克隆并插入到文档中的 HTML 片段。

CSS 阴影部分

CSS Shadow Parts 允许开发人员在 Shadow DOM 中公开某些元素以进行样式设置。

填充物

自定义元素 polyfill

@webcomponents/custom-elements - Polymer 团队的自定义元素 polyfill。
document-register-element - Andrea Giammarchi 的自定义元素 polyfill.

定制的内置元素 polyfill

@corpuscule/custom-builtin-elements - CorpusculeJS 定制的内置元素polyfill。
@ungap/custom-elements-builtin - 由 ungap 项目定制的内置元素polyfill 。

Shadow DOM 垫片

@webcomponents/shadydom - ShadowDOM v1 垫片。
@webcomponents/shadycss - ShadowDOM 样式封装垫片。
@luck/synthetic-shadow - LWC的Shadow DOM polyfill 。

HTML 模板 polyfills

@webcomponents/template - 用于<template>.
@ungap/import-node -由ungap projectimportNode为 IE11 提供的polyfill 。

指南

可访问性

最佳实践

代码实验室

例子

generic-components - 通用 Web 组件的集合，重点是可访问性和易用性。
howto-components - 实现常见 Web UI 模式的 Web 组件的集合。
open-wc 代码示例- 用于开发 Web 组件的最佳实践和设计模式的集合。
vanilla-retro-js - 不推荐使用 HTML 标记的 Vanilla JS UI 组件库。
web-components-examples - 一系列 Web 组件示例，与 MDN Web 组件文档相关。

文章

建筑学

互操作性

限制

造型

真实世界

实例探究

成分

<api-viewer>- Web 组件的 API 文档和现场操场。
<chess-board>- 独立的棋盘网络组件。
<css-doodle>- 使用 CSS 绘制图案的 Web 组件。
<dark-mode-toggle>- 允许创建暗模式切换或切换的自定义元素。
<emoji-picker>- 轻量级的表情选择器，作为 Web 组件分发。
<fg-modal>- 可访问的模式对话框 Web 组件。
<file-viewer>- 使用 Svelte 构建的用于查看文件的 Web 组件。
<json-viewer>- 在树视图中可视化 JSON 数据的 Web 组件。
<lite-youtube>- Lite YouTube 嵌入，专注于视觉表现。
<midi-player>- MIDI 文件播放器和可视化 Web 组件。
<model-viewer>- 用于渲染交互式 3D 模型的 Web 组件。
<player-x>- 媒体播放器 Web 组件。
<progressive-image>- 自定义元素逐步增强图像占位符。
<range-slider>- 具有键盘支持的可访问范围滑块自定义元素。
<rapi-doc>- 用于从 OpenAPI 规范创建文档的 Web 组件。
<shader-doodle>- 用于编写和渲染着色器的 Web 组件。
<trix-editor>- 用于日常写作的富文本编辑器自定义元素。
<vime-player>- 可定制、可扩展、可访问且与框架无关的媒体播放器。
<web-vitals>-使用自定义元素将Web Vitals快速带入您的页面。

组件库

AMP - Web 组件框架，用于轻松创建用户至上的网站、故事、广告、电子邮件等。
Apollo Elements - 用于将 Apollo GraphQL 与各种 Web 组件库一起使用的自定义元素.
AXA Pattern Library - 使用 Web 组件构建的 AXA CH UI 组件库.
Blackstone UI - Blackstone Publishing 用于创建界面的 Web 组件。
Blaze UI Atoms - 一组由 Blaze CSS 提供支持的 Web 组件。
Brightspace UI 核心- 用于构建 Brightspace 应用程序的 Web 组件集合。
Clever components - 由 Clever Cloud 制作的 Web 组件集合.
DataFormsJS - 用于 SPA 路由、显示来自 Web 服务的数据等的独立组件。
elements-sk - 用于“点菜”Web 开发的自定义元素的集合。
github-elements - GitHub 的 Web 组件集合。
Elix - 用于常见用户界面模式的高质量、可定制的 Web 组件。
沉浸式自定义元素- 一组用于嵌入沉浸式（VR 和 AR）内容的 Web 组件。
Iooxa - 用于交互式科学写作、反应式文档和可探索解释的 Web 组件。
Joomla UI 自定义元素- Joomla 4 自定义元素的编译。
Ketch.UP - Sme.UP 的 Web 组件库。
Lion Web Components - 一组高性能、可访问且灵活的 Web 组件。
LRNWebComponents - ELMS:LN 为任何项目生成 Web 组件。
Lume - 用于定义使用 CSS3D 或 WebGL 渲染的 2D 或 3D 场景的自定义元素。
Microsoft Graph Toolkit - Microsoft Graph 的 Web 组件集合。
Nightingale - 生命科学的数据可视化 Web 组件。
Nuxeo Elements - 使用 Web 组件使用 Nuxeo 构建 Web 应用程序的组件。
Open Business Application Platform Web Components - 为业务应用程序设计的 Web 组件的集合。
Pixano Elements - 专用于数据注释任务的可重用 Web 组件。
Shoelace - 一个具有前瞻性的 Web 组件库。
Smart Web Components - 用于业务应用程序的 Web 组件。
TEI Publisher Components - TEI Publisher 使用的 Web 组件及其生成的应用程序的集合。
Tradeshift Elements - 可重用的 Tradeshift UI 组件作为 Web 组件。
Vaadin components - 用于构建业务 Web 应用程序的不断发展的高质量 Web 组件集。
Warp View - Warp 10 的图表 Web 组件集合.
有线元素- 一组具有手绘粗略外观的常见 UI 元素。
Wokwi Elements - 用于 Arduino 和各种电子零件的 Web 组件。
XWeather - 实现部分 OpenWeatherMap API 的 Web 组件的集合。

设计系统

Amber Components - Amber 设计系统的 Web 组件实现。
Bolt Design System - Twig 和 Web 组件驱动的 UI 组件，可重用的视觉样式和工具。
Calcite Components - 用于 Esri 的 Calcite 设计框架的共享 Web 组件。
Carbon Custom Elements - 基于 Web 组件的 Carbon 设计系统变体。
Chameleon Web Components - 基于 Chameleon 设计系统的与框架无关的元素的集合。
Clarity Core Web Components - 来自 Clarity 设计系统的 Web 组件套件。
Crayons - 遵循 Freshworks 设计系统的 Web 组件集合。
FAST Components - 基于 FAST 设计语言的 Web 组件库。
Fluent UI Web Components - 支持 Microsoft 的 Fluent 设计语言的 Web 组件库。
GOV.UK Web Components - 一组使用 GOV.UK 设计系统的封装 Web 组件。
Helix UI - Helix 设计系统的 Web 组件库。
Lyne 组件- Lyne 设计系统的构建块基于 Web 组件。
Material Web Components - 作为 Web 组件实现的 Material Design。
数字语言 | NUDE Elements - 基于 Web 组件和运行时 CSS 生成的 HTML 框架和设计系统。
PatternFly Elements - 基于统一设计工具包的灵活和轻量级 Web 组件的集合。
Pearson Web Components - Pearson 实现 Gravity 设计系统的可共享组件库。
Spectrum Web Components - 使用 Web 组件构建的 Adobe Spectrum 设计语言实现。
UI5 Web Components - 一组实现 SAP Fiori 设计指南的可重用 UI 元素。
UM Library Design System - 密歇根大学图书馆设计系统。
Zooplus web components - 一组实现 Z+ 商店风格指南的 web 组件。

用例

图书馆

基于类

Corpuscule - 基于装饰器的小型 Web 组件框架。
DNA - 渐进式 Web 组件库。
FAST Element - 用于构建高性能、节省内存、符合标准的 Web 组件的轻量级库。
LitElement - 用于创建快速、轻量级 Web 组件的简单基类。聚合物项目的一部分。
Lightning Web Components - 超快速的企业级 Web 组件基础。
Omi - 4kb JavaScript 中的下一代 Web 框架（Web 组件 + JSX + 代理 + 存储 + 路径更新）.
面板- Web 组件 + 虚拟 DOM：强大 UI 的 Web 标准。
Polymer - Polymer 项目作者的原始 Web 组件库。
Skate - 专注于功能渲染管道和占用空间小的 Web 组件库。
slim.js - 基于现代标准的快速且强大的前端微框架。
Stencil - 用于生成 Web 组件的编译器。
Tonic - 极简、稳定、审计友好的组件框架。

功能性

atomico - 使用函数和钩子创建基于 Web 组件的接口的小型库。
fuco - 类似 React 的功能组件，但用于 Web 组件。
haunted - 为 Web 组件实现的 React 的 Hooks API。
hybrids - 用于创建具有简单和功能 API 的 Web 组件的 UI 库。
Solid - 用于创建用户界面的声明性 JavaScript 库。

集成

ember-custom-elements - 使用自定义元素渲染 Ember 和 Glimmer 组件。
preact-custom-element - 从 preact 组件生成/注册自定义元素。
@adobe/react-webcomponent - 在自定义元素中自动包装 React 组件。
react-shadow - 在 React 中利用 Shadow DOM 以及样式封装的所有好处。
reactify-wc - 使用具有 React 属性和功能的 Web 组件。
remount - 使用自定义元素将 React 组件安装到 DOM。
@riotjs/custom-elements - 使用 Riot.js 创建香草自定义元素的简单 API。

基准

制作 Web 组件的所有方法
web-components-benchmark - 使用各种示例对 Web 组件技术进行基准测试。
web-components-todo - 相同的 todo 应用程序内置在不同的 Web 组件库中，用于基准测试。

构架

角

反应

见过

苗条

生态系统

入门套件

Create Open Web Components - Web 组件项目脚手架。
custom-element-boilerplate - 用于创建自定义元素的样板。
hello-web-components - 用 TypeScript 编写的简单的入门 hello world web 组件。
nutmeg - 构建、测试和发布带有一点香料的香草 Web 组件。

工具

Backlight — Backlight 以开发人员和设计师之间的协作为核心，是一个非常完整的编码平台，团队可以在其中构建、记录、发布、扩展和维护设计系统。
自定义元素定位器- 用于在页面上查找自定义元素的 Chrome 扩展。
query-selector-shadow-dom - 可以穿透 Shadow DOM 根的 querySelector，对自动化测试很有用。
shadow-automation-selenium - 使用 Selenium 的影子 DOM 自动化。
shadow-dom-utils - 一组用于处理影子 DOM 的有用实用程序，主要用于测试环境。
@storybook/web-components - 普通 web 组件片段的 UI 开发环境。
webcomponents.dev - 面向 Web 平台开发人员的组件 IDE。
web-component-analyzer - 分析 Web 组件并发出文档/诊断的 CLI。
Web Components Codemods - Web 组件的 Codemods.

图书

Web Components in Action - Ben Farrell 所著的书籍，可在 Manning 早期发布计划中获得。
Web Component Essentials - 由 Cory Rylan 撰写，Leanpub 提供早期预览版。

教程

见解

播客

演示文稿

Web Components 是 Web 开发的 Betamax 吗？通过@lostinbrittany
@stefsull和@bferrua 设计标准系统
@salem_cobalt 的可扩展设计系统的前端架构
lit-apollo：使用平台的数据驱动组件@PowersBenny
@Martine_Dowden掌握 Shadow DOM
使用 Web 组件对大型前端进行现代化改造@samjulien
Shadow DOM：@serhiikulykov的人迹罕至的地方
@brianbouril和@danciupuliga 使用 Web 组件构建与框架无关的 UI库
@LeonieWatson的Web 组件和 AOM
@bashmish的Web 组件和样式范围
Web 组件可以做到这一点？！通过@vogloblinsky
Web 组件：@webcomp_dev的介绍和最新技术

会谈

使用指标

提案

表单相关的自定义元素

表单参与 API 解释- Google Chrome 团队的文档。
与表单相关的自定义元素- Chrome 平台状态中的功能。
网络平台测试

自定义状态伪类

可构造的样式表对象

规范草案
网络平台测试
解说员
可构造样式表- Chrome 平台状态中的功能。

各种各样的

bruck - 使用 Web 组件和 Houdini Paint API 构建的原型系统。
Vaadin Directory - 发布、讨论和评价 Web 组件
webcomponents.org - 讨论和分享 Web 组件。

历史

下面的文章代表了 Web 组件规范走向标准化的漫长故事。其中一些引用了早期的所谓“v0”Shadow DOM 和自定义元素规范，并放弃了 HTML 导入规范。这些资料在这里仅出于历史原因，它们按年份分组并按时间顺序列出。

2019

2018

2017

2016

2015

2014

2013

2012

2011

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/110326