卓能文

2024年8月21日

摘要： src/my.counter.ts: import { type Component, define, html } from "hybrids"; interface MyCounter { count: number; } function increaseCount(host: MyCount 阅读全文

posted @ 2024-08-21 11:05 卓能文阅读(36) 评论(0) 推荐(0)

ace markdown editor 原生web components

摘要： src/index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 阅读全文

posted @ 2024-08-21 09:58 卓能文阅读(78) 评论(0) 推荐(0)

2024年8月20日

lit ace markdown编辑器

摘要： src/components/ace-markdown.ts: import { LitElement, css, html } from "lit"; import { customElement, property, query } from "lit/decorators.js"; // im 阅读全文

posted @ 2024-08-20 10:53 卓能文阅读(51) 评论(0) 推荐(0)

astro中浏览器端使用lit编写的components

摘要：在vite + lit中调试好的代码my.counter.ts: import { LitElement, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; import { st 阅读全文

posted @ 2024-08-20 07:40 卓能文阅读(72) 评论(0) 推荐(0)

2024年8月18日

lit parcel模板

摘要： mkdir myproject/src -p cd myproject pnpm i lit typescript tsconfig.json: { "compilerOptions": { "target": "ES2020", "experimentalDecorators": true, "u 阅读全文

posted @ 2024-08-18 11:07 卓能文阅读(47) 评论(0) 推荐(0)

lit tailwindcss vite模板

摘要： pnpm create vite@latest my-project -- --template lit cd my-project pnpm install -D tailwindcss postcss autoprefixer sass-embedded npx tailwindcss init 阅读全文

posted @ 2024-08-18 09:40 卓能文阅读(159) 评论(0) 推荐(0)

lit动态修改样式

摘要： src/my-counter.ts: import { LitElement, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; import { styleMap } from 阅读全文

posted @ 2024-08-18 07:40 卓能文阅读(71) 评论(0) 推荐(0)

2024年8月16日

利用react-to-web-component封装react控件

摘要： src/Greeting.tsx: import React from "react"; import r2wc from "@r2wc/react-to-web-component"; type GreetingProps = { name: string; }; const Greeting: 阅读全文

posted @ 2024-08-16 10:37 卓能文阅读(178) 评论(0) 推荐(0)

Declarative Shadow DOM

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< 阅读全文

posted @ 2024-08-16 09:18 卓能文阅读(33) 评论(0) 推荐(0)

一个最简单的web components

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< 阅读全文

posted @ 2024-08-16 08:50 卓能文阅读(30) 评论(0) 推荐(0)

公告