随笔分类 - web components
摘要：@tag("my-element") class MyElement extends Component { get value() { return this.editor ? this.editor.getValue() : ""; } set value(val: string) { this
阅读全文
摘要：omi是腾讯开源的一款web components开发框架。 AceMarkdown.tsx: import { Component, createRef, h, signal, tag } from "omi"; import * as ace from "ace-builds"; import
阅读全文
摘要：src/components/ace-markdown/ace-markdown.tsx: import { Component, Prop, State, h } from "@stencil/core"; import ace from "ace-builds/src-min-noconflic
阅读全文
摘要：stencil是一个web components开发框架。 pnpm create stencil my.counter.tsx: import { Component, h, Prop } from "@stencil/core"; @Component({ tag: "my-counter",
阅读全文
摘要：lwc是一个web components开发工具。 pnpm create lwr 选择SPA。项目生成后，一些运行时包并不在package.json中，需手动安装。 package.json: { "name": "lwrdemo", "version": "0.0.1", "license":
阅读全文
摘要：src/my.counter.ts: import { type Component, define, html } from "hybrids"; interface MyCounter { count: number; } function increaseCount(host: MyCount
阅读全文
摘要：src/index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
阅读全文
摘要：pnpm create vite@latest my-project -- --template lit cd my-project pnpm install -D tailwindcss postcss autoprefixer sass-embedded npx tailwindcss init
阅读全文
摘要：src/my-counter.ts: import { LitElement, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; import { styleMap } from
阅读全文
摘要：src/Greeting.tsx: import React from "react"; import r2wc from "@r2wc/react-to-web-component"; type GreetingProps = { name: string; }; const Greeting:
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
