程序员经验分享-hwhale

真的有必要制作和使用新的自定义元素和 Web 组件（HTML 标签）吗？

2023-12-10

我目前正在学习前端 Web 开发以及 Vanilla JavaScript、框架和库（例如 React）之间的区别。 现在我熟悉了用于制作新的自定义 HTML 标签的 Web 组件。据我所知，React 也是为了同样的目的而创建的，但是当我访问 Instagram 网站（第一个想到的使用 React 的网站）并查看 HTML 代码时，我实际上没有找到任何自定义 HTML 元素，大多数元素都是由“div”标签组成的。 如果像 Instagram 这样的复杂社交媒体网站不是由自定义元素组成的，那么谁会使用它们，为什么？


React 是一个完全不同的野兽，可以追溯到近十年前。它是由 Facebook 开发的，因为太多的团队在同一个团队中进行了太多的更新DOM。所以他们想出了一个virtual在写入浏览器之前合并所有必需的 DOM 更新的 DOMDOM.

非常适合 Facebook。 Custom Elements API 和 Svelte（编译，不转换）等较新的技术已证明它不再是最佳解决方案。

反应过时的技术现在得分微薄的71% on https://custom-elements-everywhere.com/

React 和 W3C 自定义元素不是朋友

因为 React 不跟踪绿色 DOM 元素。

如果你想混合绿色和黄色，你基本上必须将每个组件重写/包装成 React 语法。因为 React 不仅处理 DOM 元素different，但 DOM 事件也可以different.

未来

这创造了一个有趣的未来：React 和 W3C 标准存在分歧.

W3C 标准实际上是由浏览器供应商制定的，
不是由 W3C 制定的，正如我们从从未实施过的案例中学到的那样ECMAScript 4传奇 (1999 - 2008)

So its

苹果 (Safari) + Mozilla (FireFox) + 谷歌/微软 (Chromium/Chredge)
versus
Facebook（没有浏览器！）

W3C 的“问题”是所有成员都必须就一个标准达成一致；这就是为什么自定义元素 API 花了数年时间才成熟……而 React 取得了先机

脸书现在做的"own"60%的开发商市场...
但是嘿，
微软占据了浏览器市场 90% 的份额...once,
几乎所有设备上都安装了 Flash……once

自定义元素API只要 ECMAScript 在浏览器中运行，就会存在

它不是框架或库！它是一种语言构造。
不学习自定义元素就像说：

我没有学习 Set 或 Map，我可以用数组做所有事情

旧的咆哮：Web 组件 - 服务/非 html 组件

或者相信 2020 年前端调查：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

ReactJS

frontend

webcomponent

真的有必要制作和使用新的自定义元素和 Web 组件（HTML 标签）吗？ 的相关文章

  • 带有淘汰赛js的隐形recaptcha

    我正在完成隐形验证码 但我在实现它时遇到问题 谷歌开发人员页面中的代码显示它应该是这样的

  • 可以在初始 DOM 解析期间/之前修改 DOM 吗？

    是否可以在初始 DOM 解析期间或之前修改 DOM 或者我是否必须等到 DOM 被解析和构建之后才能与其交互 更具体地说 是否有可能阻止 DOM 中的脚本元素使用用户脚本 内容脚本或 Chrome 或 Firefox 中的类似脚本运行 在解

  • 使用 dc.js 按条形值对条形图中的条形进行排序（排序）

    如何通过维度的计算值而不是维度本身的名称对 dc js 示例中的 x 轴 维度 进行排序 例如 请考虑序数条形图的 dc js 示例 https github com dc js dc js blob master web examples

  • Snap.svg - 停止在可悬停元素的子元素上重新触发悬停事件

    对于一个项目 我使用的 SVG 形状由背景多边形和背景多边形上方的一些文本 我已将其转换为路径 组成 我正在使用 Snap svg 为我的形状设置动画 当我将鼠标悬停在多边形上时 形状应该缩放到特定尺寸 包括其中的所有内容 鼠标移开时 形状

  • 在打字稿中导入 json

    我是 typescript 的新手 在我的项目中 我们使用 typescript2 在我的要求之一中 我需要导入 json 文件 所以我创建了 d ts 文件如下 test d ts declare module json const va

  • 隐藏 Div 的父级

    我只是想隐藏父divcomments section div class content content green div div div 我试过这个 document getElementById comments section pa

  • Draggable JS Bootstrap 模式 - 性能问题

    对于工作中的项目 我们在 JavaScript 中使用 Bootstrap Modal 窗口 我们想让一些窗口可移动 但我们遇到了 JQuery 的性能问题 myModal draggable handle modal header Exa

  • 有没有办法使用 Rspec/Capybara/Selenium 将 javascript console.errors 打印到终端？

    当我运行 rspec 时 是否可以让 capybara selenium 向 rspec 报告任何 javascript console errors 和其他异常 我有一大堆测试失败 但当我手动测试它时 我的应用程序正在运行 如果不知道仅在

  • 调整图像大小并将画布旋转 90 度

    这里有很多关于在 js 上使用画布旋转图像的主题 我阅读了其中的大部分内容 但无法找到解决我的问题的方法 我正在接收任何分辨率的图像 来自上传组件 我将其大小调整为 1024x768 如下所示 var canvas document cre

  • 使用 CSS 或 Javascript 填充动画

    我只是想知道是否可以使用 CSS 或 javascript 创建填充动画 基本上我想创建一个填充动画 如下图所示 http i40 tinypic com eit6ia png http i40 tinypic com eit6ia png

  • 网站的主体和元素固定在 980px 宽度上，不会缩小

    我试图在 Rails 应用程序顶部启动前端 仅 HTML CSS 页面 但在使用 320px 视口时遇到问题 有些元素不会按比例缩小 我不明白为什么 我已经完成了检查元素 为各种元素提供了max width 100 and or width

  • 将 UMD Javascript 模块导入浏览器

    你好 我正在对 RxJS 进行一些研究 我可以通过在浏览器中引用它来使用该库 如下所示 它使用全局对象命名空间变量 Rx 导入 我可以制作可观察的东西并做所有有趣的事情 当我将 src 更改为指向最新的 UMD 文件时 一切都会崩溃 如下所

  • 页面上使用 HTML Editor Extender 进行回发会导致 IE11 中出现 JavaScript 错误

    我已将 HTML 编辑器扩展程序添加到我正在处理的页面中 现在每当我在页面上发回帖子时 都会收到以下 Javascript 错误 JavaScript 运行时错误 参数无效 之后什么也没有发生 这在 IE10 或更低版本以及我所知道的所有其

  • Firebase 函数 onWrite 未被调用

    我正在尝试使用 Firebase 函数实现一个触发器 该触发器会复制数据库中的一些数据 我想观看所有添加的内容votes user vote 结构为 我尝试的代码是 const functions require firebase func

  • 正则表达式 - 从 markdown 字符串中提取所有标题

    我在用灰质 https www npmjs com package gray matter 以便将文件系统中的 MD 文件解析为字符串 解析器产生的结果是这样的字符串 n Clean er ReactJS Code Conditional

  • Vue 和 Vuex：处理依赖的计算属性

    我的应用程序是一个使用 Vuex 在 Vue 中构建的精简电子表格 关键组件是TableCollection Table and Row The TableCollection有一个包含多个的数组Table对象 每个Table有一个包含多个

  • 在 CKEditor 中设置字体大小和字体系列

    我正在使用 ckeditor 我想问一下这个插件如何设置font family和font size 我尝试过使用 CKEDITOR config font defaultLabel Arial CKEDITOR config fontSiz

  • 如何确定所有角度2分量都已渲染？

    当所有 Angular2 组件完成渲染时 是否会触发一个角度事件 For jQuery 我们可以用 function 然而 对于 Angular2 当domready事件被触发 html 只包含角度组件标签 每个组件完成渲染后 domrea

  • 如何使用asm.js进行测试和开发？

    最近我读到asm js规范 看起来很酷 但是是否有任何环境 工具来开发和测试这个工具 这还只是处于规范阶段吗 您可以尝试使用 emscripten 和 ASM JS 1 并从侧分支在 firefox 构建中运行它 有关 asm js 的链接

  • CSS溢出文本显示在几行中，没有断字

    我有一些长文本显示在 div 中 该 div 具有固定的宽度和高度 我希望文本显示在几行上 作为 div 高度 并且句子单词不会中断 一行中的单词前缀和下一行中的继续 此外 我想在末尾添加省略号最后一句话 CSS white space n

随机推荐

热门标签