编程三昧

JavaScript

CSS(3) Electron(4) NodeJs(5) Vue(2) 前端面试(7) 未归档(6) 题解(1)

/ 注册

学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！

全部文章 / JavaScript （共65篇）

Web Components 系列（十）—— 实现 MyCard 的基本布局

前言前面针对 Web Components 学习了一些基本的理论知识，我们了解到的概念有： Custom Elements Shadow DOM Templates Slots 以及和这些概念相关的子知识点。理论知识基本上够用了，从现在开始我们需要将理论运用到实践中，让理论为实践服务。今天，...

组件化 webComponents 前端

2022-02-17

0 328

Web_Components 系列（九）—— Shadow Host 的 CSS 选择器

前言在上一节我们了解了如何给自定义组件设置样式，当时是将自定义标签的样式设置在主 DOM 中的： <style> my-card { display: block; margin: 20px; width: 200px; ...

组件化前端 webComponents

2022-02-16

0 314

Web Components 系列（八）—— 自定义组件的样式设置

前言通过前面的学习，对自定义组件的相关概念和知识点也有了一定了解，今天我们就来学习一下给自定义元素及其子元素设置样式的几种方法。直接给自定义标签添加样式 index.html： <style> my-card{ display: block; ...

前端组件化 webComponents html5

2022-02-15

0 321

今天踩了一个基础坑

引言不知道大家有没有这样一种经历：突然发现自己之前很长时间都根深蒂固的一个观点是错误的？我今天就踩了一个坑：我的印象中一直以来记得 setInterval 在定义好之后会立即执行一次里面的逻辑，所以在实现下图的逻辑时，我将第二步（”立即执行逻辑 a“）给省去了，这一省却给我带来了了一个bug，汗...

JavaScript

2022-02-14

0 236

Web Components系列(七) ——自定义组件的生命周期

前言何谓”生命周期“？顾名思义，生命周期就是指一个物体从产生前到消亡后的整个过程，当然，不同物体的生命周期具体阶段划分可能不太一样。我们在使用前端组件框架的时候，都知道每个组件都有各自的生命周期，明确了组件生命周期后，开发者就可以在组件的不同生命周期执行不同的代码逻辑，从而达到管理组件的作用。 ...

html 组件化 WebComponent 前端

2022-02-13

0 317

Web Components 系列（五）—— 详解 Slots

前言熟悉 Vue 的同学应该都知道”插槽（slot）“的概念，通过使用插槽可以让页面内容的组织更加灵活。在 Web Components 体系中也有插槽的概念，今天我们就来具体了解一下 Slots，本文主要包括以下内容：为什么要用 Slots ？ Slots 的相关特性 Slots 的作用...

html 组件化前端 WebComponent

2022-02-12

0 398

Web Components 系列（五）—— 关于 Templates

前言在之前介绍创建 Custom Elements 的代码中，有一个地方是比较繁琐的：Shadow DOM 中的每个子元素都是通过 document.createElement 方法创建的。就像下面这样的：那到底有没有方法能简化这一步操作呢？答案是有的，就是我们今天要介绍的主角 —— Temp...

前端组件化 WebComponent

2022-02-11

0 285

Web Components系列（四） —— 认识 Shadow DOM

前言在初涉前端之时，我就一直在好奇一个问题，为什么像： <input/> <select></select> <audio></audio> <video></video> …… 等等这些标签，看起来似乎很简单...

前端 HTML5 组件化

2022-02-10

0 274

Web Components系列（三） —— 创建 Custom Elements

前言根据前面的介绍，我们知道根据是否继承基本 HTML 元素，可以将自定义元素分为两类“ Autonomous custom elements 自主定制元素 Customized built-in elements 自定义内置元素由此产生了一个疑问：这两者在使用上到底有何区别？且让我通过本...

html 组件化 WebContents JavaScript

2022-02-09

0 290

Web Components 系列（二）—— 关于 Custom Elements

前言在上一篇文章中介绍了 Web Components 的相关概念，知道它是浏览器用来原生支持“组件化”的方法，并且知晓它的技术组成为： Custom Elements Shadow DOM HTML templates 今天，我们就来学习它的技术之一——Custom Element 的部分相...

html 组件化前端

2022-02-08

0 381