首页 > 其他分享 >lit parcel模板

lit parcel模板

时间:2024-08-18 11:05:04浏览次数:10  
标签:count src parcel lit html styles true 模板

mkdir myproject/src -p
cd  myproject
pnpm i lit typescript

tsconfig.json:

{
    "compilerOptions": {
        "target": "ES2020",
        "experimentalDecorators": true,
        "useDefineForClassFields": false,
        "module": "ESNext",
        "lib": [
            "ES2020",
            "DOM",
            "DOM.Iterable"
        ],
        "skipLibCheck": true,

        /* Bundler mode */
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": true,
        "isolatedModules": true,
        "moduleDetection": "force",
        "noEmit": true,

        /* Linting */
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true
    },
    "include": [
        "src"
    ]
}

src/my.counter.ts:

import { LitElement, css, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { styleMap } from "lit/directives/style-map.js";

@customElement("my-counter")
export class MyCounter extends LitElement {
	@property({ type: Number })
	count = 0;

	render() {
		const styles = { color: "" };
		if (this.count >= 0) {
			styles.color = "green";
		} else {
			styles.color = "red";
		}
		return html`
      <div>
        <button @click=${this._onDec} part="button"> - </button>
        count is: <span style=${styleMap(styles)}>${this.count}</span>
        <button @click=${this._onInc} part="button"> + </button>
      </div>
    `;
	}

	private _onDec() {
		this.count--;
	}

	private _onInc() {
		this.count++;
	}

	static styles = css`
    button {
      border-radius: 4px;
      border: 1px solid transparent;
      background-color: limegreen;
    }
  `;
}

declare global {
	interface HTMLElementTagNameMap {
		"my-counter": MyCounter;
	}
}

src/index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    Index
    <my-counter></my-counter>
    <script type="module" src="./my.counter.ts"></script>
</body>

</html>

src/about.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    About
    <my-counter></my-counter>
    <script type="module" src="./my.counter.ts"></script>
</body>

</html>

dev:

parcel ./src/**.html

publish:

parcel build ./src/**.html

标签:count,src,parcel,lit,html,styles,true,模板
From: https://www.cnblogs.com/soarowl/p/18365389

相关文章

  • PDF 文件处理PDF合并和拆分工具PDF Merge PDF Splitter for Mac
    “PDFMergePDFSplitterforMac”是一款专门为Mac用户打造的出色PDF文件处理工具。它集合并与拆分PDF文件的核心功能于一体,能极大地方便用户对PDF文档的管理。      软件下载地址在合并功能上,它能迅速将多个PDF文件整合成一个,无论是工作报告、学习资......
  • lit tailwindcss vite模板
    pnpmcreatevite@latestmy-project----templatelitcdmy-projectpnpminstall-Dtailwindcsspostcssautoprefixersass-embeddednpxtailwindcssinit-ptailwindcss.config.js:/**@type{import('tailwindcss').Config}*/exportdefault{core......
  • 【生日视频制作】航空飞机机身AE模板修改文字软件生成器教程特效素材【AE模板】
    飞机身生日视频制作教程AE模板修改文字特效广软件告生成器素材【生日视频制作】航空飞机机身机尾AE模板修改文字软件生成器教程特效素材【AE模板】生日视频制作步骤:安装AE软件下载AE模板把AE模板导入AE软件修改图片或文字渲染出视频......
  • lit动态修改样式
    src/my-counter.ts:import{LitElement,css,html}from"lit";import{customElement,property}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";@customElement("my-counter")expo......
  • 【模板】数据结构
    数据结构权值BIT上二分struct{intn,t[N]; intkth(intk){ intp=0;rFor(i,__lg(n),0)if(p+(1<<i)<n&&k>t[p+(1<<i)])p+=1<<i,k-=t[p]; returnp+1; }};zkw线段树李超线段树线段树合并,分裂可持久化\(01......
  • Ruby模板引擎:构建动态视图的艺术
    标题:Ruby模板引擎:构建动态视图的艺术在RubyonRails的世界里,模板引擎是构建动态网页的基石。它们允许开发者将服务器端的逻辑嵌入到HTML中,实现数据的动态展示。本文将深入探讨Ruby中几种常用的模板引擎,包括ERB、Haml和Slim,分析它们的特色、优缺点,并指导如何在项目中做出选......
  • 二分查找(算法详解+模板+例题)
    一.二分的定义二分法(Bisectionmethod)即一分为二的方法.设[a,b]为R的闭区间.逐次二分法就是造出如下的区间序列([an,bn]):a0=a,b0=b,且对任一自然数n,[an+1,bn+1]或者等于[an,cn],或者等于[cn,bn],其中cn表示[an,bn]的中点。二.基本思路1.将数组排序。2.一直将数组除以二,直到找到那......
  • 【网络流模板题 EK增广路】luogu P2740 [USACO4.2] 草地排水Drainage Ditches)
    [P2740USACO4.2]草地排水DrainageDitches)大意:网络流模板做法:EK增广路#include<cstdio>#include<queue>#include<deque>#include<stack>#include<map>#include<cmath>#include<algorithm>#include<iostream>#include......
  • 【模板】网络流最大流
    最大流题目要求:给出n点m边srcsink然后每条边有uvcapacity求最大流题目链接P3376【模板】网络最大流EK(Edmonds–Karp)算法:\[\begin{align}&\color{Red}时间复杂度O(nm^2)\\&\color{Red}空间复杂度O(n+m)\\\end{align}\]#include<iostream>#include......
  • 使用 Python和 SQLite 打造一个简单的数据库浏览器
    在日常开发中,我们常常需要快速查看和操作SQLite数据库中的数据。虽然有许多现成的工具可以完成这一任务,但有时你可能想要一个更为简单、可定制的解决方案。在这篇博客中,我将带你一步步构建一个简单的SQLite数据库浏览器,它可以用来列出数据库中的表名、查看表的字段名、编写S......