时间戳

首页 > 解决方案 > HTML/JS：扩展/覆盖原生 html 元素

javascript - HTML/JS：扩展/覆盖原生 html 元素

问题描述

由于原生 html 元素的许多限制，我想知道是否可以使用 Web 组件扩展原生 html 元素并拥有自己的自定义行为。我已经看过有关此的页面，但是示例非常简单且薄弱，例如为锚标记添加确认。我不是在谈论添加一些简单的东西，我想修改行为。我希望数据列表始终显示所有选项元素，甚至有我自己的过滤逻辑。我永远找不到这些本机元素的实现代码，所以我无法尝试。

创建自定义元素不是一种选择（除非用于扩展本机元素）。在我的公司，我们将 openfin 用于小型 Web 应用程序。我们使用原生数据列表，因为我们需要我们的元素能够扩展到视口边界之外（自定义的东西会被剪掉）。

标签： javascripthtmlcustom-elementhtml-datalistnative-web-component

解决方案

下面是 webcomponents 介绍的链接：
https

://www.webcomponents.org/introduction 在该页面中，他们有指向如何实现它们的示例的链接，如下所示：
https ://www.npmjs.com/package /@polymer/paper-button

前面的信息应该让您了解所需的实现和依赖关系。您可以通过脚本添加不同的功能，甚至可以通过 CSS 进行更多修改。

即使 Web 组件基于现有的 Web 标准，它们的使用也可能需要一些跨站点通信，有时脚本/垃圾邮件拦截器可能不允许它们。由于兼容性和前面提到的，在 HTML 标准和 DOM 规范（规范）完全采用之前，我避免使用它们。
为了让它更有趣，这个 HTML 标准和 DOM 规范可以随时更改。

对于 HTML 标准： https ://html.spec.whatwg.org/ https://www.w3.org/standards/webdesign/htmlcss

对于 DOM 规范： https ://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction http://www.w3.org/DOM/ https://dom.spec.whatwg.org /


来自该领域一段时间的人的建议（我）：
- 随着事情的变化，使用您可以在当前设备/浏览器上使用的东西。
- 类似的 webcomponents 行为/感觉/外观可以通过 HTML/CSS/Javascript 的组合来实现。
- 如前所述，事情发生了变化，学习新的东西并没有错，因为下面的这个实验性 web 组件（它们可能会或可能不会实现）：
https ://www.webcomponents.org/author/fs-webcomponents

在另一个答案中，我包含了一个带有我创建的旧列表的片段。

我希望这些信息对您有所帮助或将您带到可能有帮助的其他信息。
最好的问候，
拉蒙

推荐阅读