1. 首页
  2. css

CSS3种与自定义元素集成的方法

作为一个处于设计和代码交叉点的web开发人员,我被web组件所吸引,因为它们的可移植性。这是有意义的:自定义元素是在所有现代浏览器中都能工作的功能齐全的HTML元素,shadowdom用一个合适的自定义表面积封装了正确的样式。它非常适合,特别是对于那些希望跨多个框架(如Angular、Svelte和Vue)创建一致用户体验的大型组织来说。
然而,根据我的经验,有一个异常点,许多开发人员认为定制元素不起作用,特别是那些使用React的开发人员,可以说,React是最有用的现在流行的前端库。诚然,React确实有一些增加与web组件规范兼容性的机会;然而,React不能与web组件深度集成的想法是一个神话,我将介绍如何将React应用程序与Web组件集成,以创建(几乎)无缝的开发人员体验。我们将研究React的最佳实践及其局限性,然后创建通用包装器和自定义JSX pragma,以便将自定义元素与当今最流行的框架更紧密地结合起来。如果React是一本着色书,请原谅这个比喻,我有两个小孩,他们都喜欢色彩,当然也有一些方法可以保持在线条内,以适应定制元素。首先,我们将编写一个非常简单的自定义元素,将文本输入附加到shadowdom,并在值更改时发出事件。为了简单起见,我们将使用LitElement作为基础,但是如果您愿意,您当然可以从头开始编写自己的自定义元素//codepen.io/anon/embed/ExgoXdY?height=250&theme id=1&slug hash=>CodePen Embed Fallback
我们的super-cool-input元素基本上是一个包装器,它为发出自定义事件的普通ol\”元素提供了一些样式。它有一个reportValue方法,让用户以最讨厌的方式知道当前值。虽然这个元素可能不是最有用的,但我们将在React中插入它时说明的技术将有助于处理其他自定义元素。方法1:根据React的Web组件文档,使用ref
,[t]访问Web组件的必需API,您将需要使用ref来直接与DOM节点进行交互。\”
这是必要的,因为React目前没有侦听本机DOM事件的方法(更倾向于使用自己的专有SyntheticEvent系统),它也不能声明性地访问当前的DOM元素而不使用ref。
我们将使用React的useRef钩子来创建对我们定义的本机DOM元素的引用。我们还将使用React的useEffect和useState钩子访问输入值并将其呈现给我们的应用程序。如果值是单词\”rad\”的变体,我们还将使用ref调用super-cool-input\”sreportValue方法//codepen.io/anon/embed/dypJRBO?height=300&theme id=1&slug hash=>CodePen Embed Fallback
在上面的示例中需要注意的一件事是我们的React组件的suseEffect块。

On this component, we have created a prop, onCustomInput,当存在时,会触发来自父组件的事件回调。与普通的事件回调不同,我们选择添加一个沿

CSS3种与自定义元素集成的方法 为WP2原创文章,链接:https://www.wp2.cn/css/css3%e7%a7%8d%e4%b8%8e%e8%87%aa%e5%ae%9a%e4%b9%89%e5%85%83%e7%b4%a0%e9%9b%86%e6%88%90%e7%9a%84%e6%96%b9%e6%b3%95/