当前位置： 首页 > news >正文

Shadow DOM举例

news 2026/5/16 16:18:25

这东西具有隔离效果，对于一些插件需要append一些div倒是不错的选择

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>演示例子</title>
</head>
<body>
<style>
p{color:#38f !important;}
.box{color:#1ff !important;}
</style><p>看看颜色</p>
<div class="box">继续看看颜色</div>
<div id="shadow">影子节点</div>
<script>
// 获取宿主元素
const hostElement = document.querySelector('#shadow');// 创建一个 Shadow Root
const shadowRoot = hostElement.attachShadow({ mode: 'closed' });
// 添加一些样式和内容到 Shadow Root
shadowRoot.innerHTML = `<style>p {color: #f1f;}</style><p>This is inside Shadow DOM</p>
`;
</script>
</body>
</html>

相关文章：

Shadow DOM举例

这东西具有隔离效果&#xff0c;对于一些插件需要append一些div倒是不错的选择 <!DOCTYPE html> <html lang"zh-CN"> <head> <meta charset"utf-8"> <title>演示例子</title> </head> <body> <style&g…...

编程日记 2025/2/4 0:07:05

力扣动态规划-18【算法学习day.112】

前言 ###我做这类文章一个重要的目的还是记录自己的学习过程&#xff0c;我的解析也不会做的非常详细&#xff0c;只会提供思路和一些关键点&#xff0c;力扣上的大佬们的题解质量是非常非常高滴&#xff01;&#xff01;&#xff01; 习题 1.下降路径最小和 题目链接:931. …...

编程日记 2025/2/4 0:03:00

网络基础

协议 协议就是约定 网络协议是协议中的一种 协议分层 协议本身也是软件&#xff0c;在设计上为了更好的模块化&#xff0c;解耦合&#xff0c;也是设计成为层状结构的 两个视角&#xff1a; 小白&#xff1a;同层协议&#xff0c;直接通信 工程师&#xff1a;同层协议&…...

编程日记 2025/2/4 0:01:59

使用 EXISTS 解决 SQL 中 IN 查询数量过多的问题

在 SQL 查询中&#xff0c;当我们面对需要在 IN 子句中列举大量数据的场景时&#xff0c;查询的性能往往会受到显著影响。这时候&#xff0c;使用 EXISTS 可以成为一种优化的良方。 问题的来源 假设我们有两个表&#xff0c;orders 和 customers&#xff0c;我们需要查询所有…...

编程日记 2025/2/3 23:59:58

使用SpringBoot发送邮件|解决了部署时连接超时的bug|网易163|2025

使用SpringBoot发送邮件 文章目录 使用SpringBoot发送邮件1. 获取网易邮箱服务的授权码2. 初始化项目maven部分web部分 3. 发送邮件填写配置EmailSendService [已解决]部署时连接超时附&#xff1a;Docker脚本Dockerfile创建镜像启动容器 1. 获取网易邮箱服务的授权码 温馨提示…...

编程日记 2025/2/3 23:57:54

Ruby Dir 类和方法详解

Ruby Dir 类和方法详解 引言 在 Ruby 中&#xff0c;Dir 是一个非常有用的类&#xff0c;用于处理文件系统中的目录。它提供了许多方便的方法来列出目录内容、搜索文件、以及处理文件系统的其他相关操作。本文将详细介绍 Ruby 的 Dir 类及其常用方法。 一、Dir 类概述 Dir …...

编程日记 2025/2/3 23:52:46

克隆OpenAI（基于openai API和streamlit）

utils.py&#xff1a; from langchain_openai import ChatOpenAI from langchain.memory import ConversationBufferMemory from langchain.chains import ConversationChain import osdef get_chat_response(api_key,prompt,memory): # memory不能是函数的内部局部变量&…...

编程日记 2025/2/3 23:43:30

位运算算法题

一.判断字符是否唯一 法一&#xff1a; 我们直接借助一个字符数组来模拟哈希表统计字符串即可&#xff0c;并且我们没有必要先将所有字符都放入字符数组中&#xff0c;边插入边判断&#xff0c;当我们要插入某个字符的时候&#xff0c;发现其已经出现了&#xff0c;此时必然重复…...

编程日记 2025/2/3 23:42:27

12 向量结构模块（vector.rs）

一vector.rs源码 // Copyright 2013 The Servo Project Developers. See the COPYRIGHT // file at the top-level directory of this distribution. // // Licensed under the Apache License, Version 2.0 <LICENSE-APACHE or // http://www.apache.org/licenses/LICENSE…...

编程日记 2025/2/3 23:40:24

Android车机DIY开发之学习篇(六)编译讯为3568开发板安卓

Android车机DIY开发之学习篇(六)编译讯为3568开发板安卓 1.SDK解压到家目录下的 rk3588_android_sdk 目录 一. 全部编译 ###安装所需环境 sudo apt-get update sudo apt-get install git-core gnupg flex bison gperf build-essential zip curl zlib1g-dev gcc-multilib g…...

编程日记 2025/2/3 23:30:11

Codeforces Round 863 (Div. 3) E. Living Sequence

题目链接 头一回用不是正解的方法做出来&#xff0c;也是比较极限&#xff0c;直接说做法就是二分数位dp 数位 d p dp dp 求 1 − n 1-n 1−n出现多少含 4 4 4的数字个数 这纯纯板子了 \sout{这纯纯板子了} 这纯纯板子了 设 f ( x ) f(x) f(x) 为 1 − x 1-x 1−x 中含有4的…...

编程日记 2025/2/3 23:26:07

一文讲解HashMap线程安全相关问题(上)

HashMap不是线程安全的&#xff0c;主要有以下几个问题&#xff1a; ①、多线程下扩容会死循环。JDK1.7 中的 HashMap 使用的是头插法插入元素&#xff0c;在多线程的环境下&#xff0c;扩容的时候就有可能导致出现环形链表&#xff0c;造成死循环。 JDK 8 时已经修复了这个问…...

编程日记 2025/2/3 23:21:02

MFC 创建Ribbon样式窗口

然后点击下一步直到完成即可...

编程日记 2025/2/3 23:17:58

uv 安装包

是的&#xff0c;你可以使用 uv 来安装 Python 包。uv 是一个高性能的 Python 包安装器和解析器&#xff0c;由 astral.sh 团队开发&#xff0c;旨在替代 pip 和 pip-tools&#xff0c;提供更快的包安装体验。 ### 如何使用 uv 安装包 1. **安装 uv**&#xff1a; 如果你还…...

编程日记 2025/2/3 23:16:56

IELTS口语练习题库

IELTS口语1-4月题库 Part 1 Gifts Have you ever sent handmade gifts to others? Yes, I have. I once made a scrapbook for my best friend’s birthday. It included photos of our memories together and some handwritten notes. She loved it because it was personal…...

编程日记 2025/2/3 23:13:54

图书管理系统 Axios 源码__获取图书列表

目录 核心功能 源码介绍 1. 获取图书列表 技术要点 适用人群 本项目是一个基于 HTML Bootstrap JavaScript Axios 开发的图书管理系统&#xff0c;可用于 添加、编辑、删除和管理图书信息&#xff0c;适合前端开发者学习 前端交互设计、Axios 数据请求 以及 Bootstrap 样…...

编程日记 2025/2/3 23:11:52

基于OSAL的嵌入式裸机事件驱动框架——整体架构调度机制

参考B站up主【架构分析】嵌入式祼机事件驱动框架 感谢大佬分享 任务ID &#xff1a; TASK_XXX TASK_XXX 在系统中每个任务的ID是唯一的&#xff0c;范围是 0 to 0xFFFE&#xff0c;0xFFFF保留为SYS_TSK_INIT。 同时任务ID的大小也充当任务调度的优先级&#xff0c;ID越大&#…...

编程日记 2025/2/3 23:10:51

c++ string类 +底层模拟实现

提醒: 本片博客只是小编的听课笔记&#xff0c;介意勿看。 基础 包含在头文件<string>&#xff0c;才能使用string类似函数接口。 string常见构造类 string s1; cin>>s1;//无参构造 string s2(s1);//拷贝构造 string s1("jfksa");//传参构造 三种…...

编程日记 2025/2/3 23:07:47

六十分之三十七——一转眼、时光飞逝

一、目标 明确可落地&#xff0c;对于自身执行完成需要一定的努力才可以完成的 1.第三版分组、激励、立体化权限、智能设备、AIPPT做课 2.8本书 3.得到&#xff1a;头条、吴军来信2、卓克科技参考3 4.总结思考 二、计划 科学规律的&#xff0c;要结合番茄工作法、快速阅读、…...

编程日记 2025/2/3 22:58:37

Shell基础：中括号的使用

在Shell脚本中&#xff0c;中括号&#xff08;[ ... ] 和 [[ ... ]]&#xff09;是一种常见的条件测试结构。它们用于进行文件类型检查、值比较以及逻辑判断。通过了解它们的不同特点和用法&#xff0c;能够帮助你编写更加高效、安全且易读的脚本。本文将详细介绍Shell中单中括…...

编程日记 2025/2/3 22:53:32

【ElevenLabs土耳其语音实战指南】：2024最新Turkish TTS配置全流程（含音色微调+本地化发音校准）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;ElevenLabs土耳其语音技术概览与本地化价值 ElevenLabs 作为前沿AI语音合成平台&#xff0c;已正式支持土耳其语&#xff08;tr-TR&#xff09;语音克隆与实时TTS生成&#xff0c;其声学模型基于覆盖安…...

编程新知 2026/5/16 15:42:39

烟草叶部病害-目标检测数据集（包括VOC格式、YOLO格式）

烟草叶部病害-目标检测数据集&#xff08;包括VOC格式、YOLO格式&#xff09; 数据集&#xff08;文章最后关注公众号获取数据集&#xff09;&#xff1a; 链接: https://pan.baidu.com/s/1-4LCiMULEf7OT9JHzL38BQ?pwdytbu 提取码: ytbu 数据集信息介绍&#xff1a; 共有 156…...

编程新知 2026/5/16 15:06:29

Claude代码生成Token预算管理实战：成本控制与智能优化策略

1. 项目概述与核心价值最近在折腾大模型应用开发&#xff0c;特别是围绕Claude这类顶尖的代码生成模型时&#xff0c;一个绕不开的痛点就是成本控制。模型调用是按Token计费的&#xff0c;而一个复杂的代码生成任务&#xff0c;动辄消耗成千上万个Token&#xff0c;账单不知不觉…...

编程新知 2026/5/16 14:22:33

基于Puppeteer与GPT的微信AI助手：从自动化到智能回复的完整实现

1. 项目概述&#xff1a;一个能帮你自动回复微信消息的AI助手 如果你也和我一样&#xff0c;每天被淹没在微信的群聊、私聊和各种公众号消息里&#xff0c;但又不想错过重要信息&#xff0c;或者希望有一个“智能分身”能帮你处理一些重复性的咨询&#xff0c;那么这个项目你一…...

编程新知 2026/5/16 13:16:25

音频处理中的头部空间标准化：原理、工具与工程实践

1. 项目概述&#xff1a;一个为音频处理而生的“头部空间”工具如果你经常处理音频&#xff0c;尤其是人声干音&#xff0c;那你一定对“头部空间”这个概念不陌生。简单来说&#xff0c;它指的是人声录音中&#xff0c;人声峰值电平与数字满刻度&#xff08;0 dBFS&#xff09…...

编程新知 2026/5/16 12:28:58

Glass Browser：如何在Windows上免费实现终极多任务处理体验

Glass Browser&#xff1a;如何在Windows上免费实现终极多任务处理体验 【免费下载链接】glass-browser A floating, always-on-top, transparent browser for Windows. 项目地址: https://gitcode.com/gh_mirrors/gl/glass-browser 你是否经常需要在多个窗口间来回切换…...

编程新知 2026/5/16 12:01:29

设计程序统计共享单车使用分布数据，优化投放点位，解决市民短途出行找不到车辆出行难题。

构建一个共享单车使用分布统计与投放点位优化的商务智能示例项目&#xff0c;去营销化、中立化&#xff0c;仅用于学习与工程实践参考。一、实际应用场景描述在城市短途出行场景中&#xff0c;共享单车已成为重要补充&#xff1a;- 覆盖公交、地铁“最后一公里”- 解决 1–3 公…...

编程新知 2026/5/16 11:52:16

PowerPoint插件latex-ptt安装踩坑全记录：从‘无法下载’到‘点击报错’的保姆级排雷指南

LaTeX公式输入神器latex-ppt插件安装与排雷全攻略 在学术报告、技术分享或教学演示中&#xff0c;数学公式的呈现质量直接影响专业形象。虽然PowerPoint作为主流演示工具广受欢迎&#xff0c;但其原生公式编辑器功能有限&#xff0c;无法满足科研工作者对LaTeX公式排版的需求。…...

编程新知 2026/5/16 10:53:38

基于MCP协议构建Azure DevOps智能助手：连接AI与开发运维的实践指南

1. 项目概述&#xff1a;一个连接开发与运维的智能“翻译官”如果你和我一样&#xff0c;长期在Azure DevOps的流水线、看板和代码仓库里打转&#xff0c;同时又对新兴的AI编程助手&#xff08;比如Claude、Cursor&#xff09;爱不释手&#xff0c;那你肯定遇到过这样的困境&am…...

编程新知 2026/5/16 10:24:03

MQTT 协议 超详细精讲

一、MQTT 协议简介全称&#xff1a;Message Queuing Telemetry Transport&#xff08;消息队列遥测传输协议&#xff09;定位&#xff1a;专为物联网、嵌入式设备、低带宽、弱网环境设计的轻量级发布 / 订阅式消息传输协议&#xff0c;是数字孪生、智能家居、工业物联网最常用的…...

编程新知 2026/5/16 10:13:09