webcomponents安装了没有用_超简单的Web Components导航

7120b9ae2f8de61fdf33ac15c1ab9c6b.png

如果你还在寻找纯前端的,无webpack的,无server的组件封装方式,那是时候玩一玩Web Components了。

“那兼容性呢?”

“你说啥?”

“兼容性呢?”

“你说啥?”

“……”

“你说啥?”

“我知道了,那不是我的目标用户。”

“你说兼容性啊,有个东西叫Polyfill。”


起因

闲着无聊,重写一个简单的管理页面,顺手改造成Web Components,就想着写一篇上手文章,分享一下。


正文

假设我们有个简单的要死的导航,没有图片,没有样式,就是单单的nav套几个a标签,如图:

eb6c3f98d13a041b25ca377a5da6ed81.png

然后我们就改写成Web Components吧,至于为啥?闲的,不行吗?当然是为了不停的学习了。

原来的结构:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Node.js 本身是用于服务器端编程的,它并不具备前端渲染的能力。但是可以通过一些工具和框架,使 Node.js 可以渲染 Web Components。 其中,最常用的工具是 Puppeteer,它是一个基于 Chrome Headless 的 Node.js 库,可以模拟用户在浏览器中的操作,包括渲染和操作 Web Components。 使用 Puppeteer 可以通过以下步骤实现 Web Components 的渲染: 1. 安装 Puppeteer 库 可以通过 npm 安装 Puppeteer: ``` npm install puppeteer ``` 2. 启动浏览器 使用 Puppeteer 启动一个浏览器实例: ```javascript const puppeteer = require('puppeteer'); const browser = await puppeteer.launch(); const page = await browser.newPage(); ``` 3. 导航Web Components 页面 使用 `page.goto` 方法导航到包含 Web Components 的页面: ```javascript await page.goto('http://example.com/my-web-component'); ``` 4. 等待 Web Components 加载完成 使用 `page.waitForSelector` 等待 Web Components 加载完成: ```javascript await page.waitForSelector('my-web-component'); ``` 5. 获取 Web Components 元素 使用 `page.$` 方法获取 Web Components 元素: ```javascript const webComponent = await page.$('my-web-component'); ``` 6. 获取 Web Components 的 Shadow DOM 使用 `elementHandle.contentFrame` 方法获取 Web Components 的 Shadow DOM: ```javascript const shadowRoot = await webComponent.contentFrame(); ``` 7. 操作 Web Components 使用 `shadowRoot.$` 方法获取 Shadow DOM 中的元素,并通过 `elementHandle.type` 等方法进行操作: ```javascript const inputElement = await shadowRoot.$('input'); await inputElement.type('hello world'); ``` 8. 关闭浏览器实例 最后,使用 `browser.close` 方法关闭浏览器实例: ```javascript await browser.close(); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值