Web Components 系列(八)—— 自定义组件的样式设置
前言
通过前面的学习,对自定义组件的相关概念和知识点也有了一定了解,今天我们就来学习一下给自定义元素及其子元素设置样式的几种方法。
直接给自定义标签添加样式
index.html:
<style>my-card{display: block;margin: 20px;width: 200px;height: 200px;border: 3px solid #000;}
</style>
<my-card></my-card>
<script src="./index.js"></script>
index.js:
class MyCard extends HTMLElement {constructor() {super();this.shadow = this.attachShadow({ mode: "open" });}
}window.customElements.define("my-card", MyCard);
结果样式生效:
需要注意的是:继承自 HTMLElement 的自定义元素,其 style.display
默认为 inline。
由以上结果可以推论出:
- 给自定义元素添加 class,然后通过 class 名称设置样式可以生效;
- 给自定义元素添加行内样式,可以生效;
- 在自定义元素构造函数中给 this 添加样式,可以生效。
给自定义元素内部子元素设置样式
在主 DOM 通过类名设置
在 style 标签中增加如下样式:
<style>my-card {display: block;margin: 20px;width: 200px;height: 200px;border: 3px solid #000;}.card-header {padding: 10px;font-weight: bold;background-color: yellow;}
</style>
<my-card></my-card><script>class MyCard extends HTMLElement {constructor () {super();this.shadow = this.attachShadow({mode: "open"});let headerEle = document.createElement("div");headerEle.className = "card-header";headerEle.innerText = "My Card";this.shadow.appendChild(headerEle);}}window.customElements.define("my-card", MyCard);
</script>
结果:不生效。
通过前面的学习,我们知道:自定义元素内部实际上是一个 Shadow DOM,它和主 DOM 是相互隔离的,所以,主 DOM 中的样式是影响不到 Shadow DOM 的。
使用 JS 给 Shadow DOM 增加 style 标签
这里分为两种场景:在主 DOM 使用 JS 、在 Custom Elements 构造函数中使用 JS。
第一种:在主 DOM 使用 JS 给 Shadow DOM 增加 style 标签:
<style>my-card {display: block;margin: 20px;width: 200px;height: 200px;border: 3px solid #000;}
</style>
<my-card>
</my-card><script>class MyCard extends HTMLElement {constructor () {super();this.shadow = this.attachShadow({mode: "open"});let headerEle = document.createElement("div");headerEle.className = "card-header";headerEle.innerText = "My Card";this.shadow.appendChild(headerEle);}}window.customElements.define("my-card", MyCard);// 给 Shadow DOM 增加 style 标签let styleEle = document.createElement("style");styleEle.textContent = `.card-header{padding:10px;background-color: yellow;font-size: 16px;font-weight: bold;}`;document.querySelector("my-card").shadowRoot.appendChild(styleEle);
</script>
效果如下:
第二种:在 Custom Elements 构造函数中使用 JS 增加 style 标签:
<style>my-card {display: block;margin: 20px;width: 200px;height: 200px;border: 3px solid #000;}
</style>
<my-card>
</my-card><script>class MyCard extends HTMLElement {constructor () {super();this.shadow = this.attachShadow({mode: "open"});let styleEle = document.createElement("style");styleEle.textContent = `.card-header{padding:10px;background-color: yellow;font-size: 16px;font-weight: bold;}`;this.shadow.appendChild(styleEle);let headerEle = document.createElement("div");headerEle.className = "card-header";headerEle.innerText = "My Card";this.shadow.appendChild(headerEle);}}window.customElements.define("my-card", MyCard);
</script>
效果如下:
就以上两种方式来说,第二种更符合组件化的特征,并且使用第一种方式时要注意,如果将添加 style 标签的代码放在定义 Custom Elements 之前会报错(找不到自定义元素)。
引入 CSS 文件
这里使用 JS 创建 link 标签,然后引入 CSS 文件给自定义元素内部的子元素设置样式,代码如下:
<style>my-card {display: block;margin: 20px;width: 200px;height: 200px;border: 3px solid #000;}
</style>
<my-card>
</my-card><script>class MyCard extends HTMLElement {constructor () {super();this.shadow = this.attachShadow({mode: "open"});let linkEle = document.createElement("link");linkEle.rel = "stylesheet";linkEle.href = "./my_card.css";this.shadow.appendChild(linkEle);let headerEle = document.createElement("div");headerEle.className = "card-header";headerEle.innerText = "My Card";this.shadow.appendChild(headerEle);}}window.customElements.define("my-card", MyCard);
</script>
my_card.css 代码如下:
.card-header{padding:10px;background-color: yellow;font-size: 16px;font-weight: bold;
}
效果如下:
当然,这里也可以在主 DOM 中使用 JS 给 Shadow DOM 引入 CSS 文件,但是,这样做不符合组件化的特征,所以略过。
结束语
以上就是给自定义元素及其子元素进行样式设置的基本方法总结。
- ~
- 本文完,感谢阅读!
~
学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!
大家好,我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教!
Web Components 系列(八)—— 自定义组件的样式设置相关推荐
- Web Components系列(七) ——自定义组件的生命周期
前言 何谓"生命周期"?顾名思义,生命周期就是指一个物体从产生前到消亡后的整个过程,当然,不同物体的生命周期具体阶段划分可能不太一样. 我们在使用前端组件框架的时候,都知道每个组件 ...
- Web Components 系列(十)—— 实现 MyCard 的基本布局
前言 前面针对 Web Components 学习了一些基本的理论知识,我们了解到的概念有: Custom Elements Shadow DOM Templates Slots 以及和这些概念相关的 ...
- Web Components 系列(二)—— 关于 Custom Elements
前言 在上一篇文章中介绍了 Web Components 的相关概念,知道它是浏览器用来原生支持"组件化"的方法,并且知晓它的技术组成为: Custom Elements Shad ...
- Web Components 系列(五)—— 详解 Slots
前言 熟悉 Vue 的同学应该都知道"插槽(slot)"的概念,通过使用插槽可以让页面内容的组织更加灵活. 在 Web Components 体系中也有插槽的概念,今天我们就来具体 ...
- easyv平台_过滤器强制修改dom(暴力自定义组件渲染样式)
通过dom暴力自定义组件 注册测试账号 效果 原理探索 html修改原生的样式 easyv的渲染规律 div的id和组件的名称数据关系 结论 easyv的过滤器编写 结尾 注册测试账号 在easyv官 ...
- Web Components 系列(五)—— 关于 Templates
前言 在之前介绍创建 Custom Elements 的代码中,有一个地方是比较繁琐的:Shadow DOM 中的每个子元素都是通过 document.createElement 方法创建的.就像下面 ...
- 支付宝小程序填坑系列 之 自定义组件无法显示
最近换了台新机器,重装了支付宝小程序IDE,发布了一个新版本的支付宝小程序,于是奇异的事情发生了... 之前使用很正常的支付宝小程序,突然间无法登录了,于是一顿排查猛如虎... 最后发现是卡在了登录环 ...
- android微信分享怎么自定义样式,自定义微信分享样式设置教程
一.功能效果 自定义微信分享可以设置个性化的分享图片.标题.描述,让分享内容更加受到用户的喜爱和欢迎. 二.功能说明 [版本]网站标准版及以上 [前提]1.需要授权已认证的公众号(支持服务号.订阅号) ...
- Svelte入门——Web Components实现跨框架组件复用(二)
在上节中,我们一起了解了如何使用Svelte封装Web Component,从而实现在不同页面间使用电子表格组件. Svelte封装组件跨框架复用,带来的好处也十分明显: 1.使用框架开发,更容易维护 ...
最新文章
- apache配置网络驱动器
- 数据结构与算法笔记(二)—— 顺序表
- linux查看终端进程,Linux查看进程
- 【Android 修炼手册】常用技术篇 -- Android 自定义 View
- 单点突破,击穿阈值,DevOps转型你需要这样做
- Linux下显示当前目录下的全部目录或文件
- 开启 JM 的 trace 功能
- layui表格checkbox选择全选样式及功能
- BGP 默认路由和OSPF默认路由的异同
- c语言0可以除10吗,C语言10.0
- 一些经常会用到的Javascript检测函数
- [2018.12.6]左偏树
- Process when we start our testing work
- 其实,前面倒腾那么多,只是为了想玩SPRING BOOT
- java工具类-Java对象转换成Map
- python打开rar_使用Python解压zip、rar文件
- 指环王解析_回到指环王
- Linux LED子系统调试与应用 设备树官方文档与 gpio-leds.c 源码详解
- spynet(六):光流整体结构
- 99乘法表,读写文件,函数
热门文章
- 安装vim提示Depends: libpython3.5 (>= 3.5.0~b1) but it is not going to be installed的解决方法
- redis集群出现JedisNoReachableClusterNodeException异常(No reachable node in cluster)
- 如何在浏览器中增加Jupyter / ipython笔记本的单元格宽度?
- 如何显示win11隐藏文件
- 统一异常处理ControllerAdvice
- ajax怎样带值,ajax携带状态值
- excel制作录入和查询系统_叮咚!您有一份Excel人员信息查询系统,请您查收~
- e.target+addEventListener事件委托
- JavaWeb的JSP原理,详细解析(建议收藏)
- Vue报错'Do not use built-in or reserved HTML elements as component id:解决方法