1. 首页
  2. css

CSS闹鬼:Web组件的钩子

我正和戴夫聊天,他告诉我闹鬼的事。它是钩子,但是对于本机web组件!很酷。我认为这样的东西的存在使得使用web组件越来越容易接受——特别是在完全不需要任何构建步骤的情况下。

我知道web组件有各种各样的问题,但通常让我远离它们的是缺少良好的模板和重新呈现以及没有状态管理

但是现在我们可以很快地把这两个解决掉…

首先,制作一个像<my-app>这样的组件非常舒服:

import{html}from\"https://unpkg.com/lit-html/lit-html.js\"从导入{component}\"https://unpkg.com/hounted/hounted.js\"function App(){return html`&lt;div>

然后我们可以添加一些状态使用钩子:

import{html}from\"https://unpkg.com/lit-html/lit-html.js从导入{component,useState}https://unpkg.com/hounted/hounted.js\"function App(){const[name,>

本周的CodePen挑战是使用starwarsapi,所以让我们发出一个fetch请求并使用它来填充状态。这是useffect的一个很好的用例。

从导入{html}\"https://unpkg.com/lit-html/lit-html.js\"从导入{component,useState,useffect}\"https://unpkg.com/hounted/hounted.js\"函数App(){const[planers,=&gt;=&gt;{返回=数据.结果;//删除no=&gt;行星直径!==\"0\");setplaners(planers);});},[]);return html`&lt;style&gt;/*Shadow DOM styles*/&lt;/style&gt;&lt;div=&gt;html`&lt;div>

这是一个合适的小web组件!

CSS闹鬼:Web组件的钩子 为WP2原创文章,链接:https://www.wp2.cn/css/css%e9%97%b9%e9%ac%bc%ef%bc%9aweb%e7%bb%84%e4%bb%b6%e7%9a%84%e9%92%a9%e5%ad%90/

发表评论

您的电子邮箱地址不会被公开。