香草卷筒纸组件

2023-11-07 16:31
文章标签 组件 香草 卷筒纸

本文主要是介绍香草卷筒纸组件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

什么是Web组件? (What are Web Components?)

Web components are custom, reusable web elements which encapsulate functionality, markup structure and styling by using vanilla javascript/HTML/CSS along with native Web APIs.

Web组件是可重用的自定义Web元素,它们通过使用原始javascript / HTML / CSS以及本机Web API来封装功能,标记结构和样式。

Custom elements teach the browser new tricks while preserving the benefits of HTML

自定义元素在保持HTML优势的同时,教给浏览器新技巧

Eric Bidelman

埃里克·比德尔曼 ( Eric Bidelman)

They can be used in the template like common HTML elements (e.g.<p> or <span> ).

它们可以像通用HTML元素(例如<p><span> )一样在模板中使用。

<body>
<p>a simple paragraph</p> <script type="module" src="my-custom-element.js"></script>
<my-custom-element></my-custom-element>
</body>

They build upon ECMAScript 2015 class syntax by extending the HTMLElement interface, that ships useful APIs for manipulating the element or responding to events.

它们通过扩展HTMLElement接口建立在ECMAScript 2015类语法的基础上,该接口提供了用于操纵元素或响应事件的有用API 。

class MyCustomElement extends HTMLElement {}

You can also extend existing HTML elements like HTMLInputElement, HTMLButtonElement, or HTMLParagraphElement to inherit their properties and methods. Thereby you’re able to create your own implementations of common HTML elements.

您还可以扩展现有HTML元素(如HTMLInputElementHTMLButtonElementHTMLParagraphElement以继承其属性和方法。 因此,您可以创建自己的通用HTML元素实现。

生命周期挂钩 (Life Cycle Hooks)

There are a few predefined callback functions you can use for reacting to specific life cycle events, like

您可以使用一些预定义的回调函数来响应特定的生命周期事件,例如

  • connectedCallback — this callback is called whenever your element is inserted into the DOM

    connectedCallback每当您的元素插入DOM时,都会调用此回调

  • disconnectedCallback — is called whenever the element is removed from the DOM tree

    disconnectedCallback每当从DOM树中删除元素时调用

These callbacks are useful for safely fetching/accessing data or running some clean up code.

这些回调对于安全地获取/访问数据或运行一些清理代码很有用。

影子DOM (Shadow DOM)

The encapsulation of the styling and markup structure is achieved by attaching a so called Shadow DOM to your web component, which creates a hidden DOM tree beneath your custom HTML element.

样式和标记结构的封装是通过将所谓的Shadow DOM附加到您的Web组件来实现的,该组件在您的自定义HTML元素下创建了一个隐藏的DOM树。

Shadow DOM in rendered HTML
Shadow DOM visible Chrome DevTools elements tab
Shadow DOM可见的Chrome DevTools元素选项卡

The Shadow DOM is useful when the components markup and style should remain unaffected by global style definitions.

当组件标记和样式应不受全局样式定义的影响时,Shadow DOM很有用。

浏览器支持 (Browser Support)

Web components are supported by all modern browsers like Chrome, Firefox and Opera (for Edge, Safari and IE11 you can use polyfills).

所有现代浏览器(例如Chrome,Firefox和Opera)都支持Web组件(对于Edge,Safari和IE11,您可以使用polyfills )。

构架 (Frameworks)

There are a few frameworks, which will accelerate your web component development, like Polymer or Hybrids. Before adding the framework of your choice to your project try to evaluate whether you’ll really need this additional dependency.

有一些框架可以加速您的Web组件开发,例如PolymerHybrids 。 在将选择的框架添加到项目中之前,请尝试评估您是否真的需要此附加依赖项。

In case you want to create just a few simple components and not an entire component library, you should take the no-framework-path.

如果只想创建几个简单的组件而不是整个组件库,则应采用no-framework-path。

实施Web组件 (Implementing a Web Component)

After clarifying all the necessary fundamentals let’s get our hands dirty and implement a vanilla web component. The goal is to create a basic web component, which contains encapsulated styles/markup and which can be easily extended.

弄清所有必要的基础知识之后,让我们动手做一个简单的Web组件。 目标是创建一个基本的Web组件,其中包含封装的样式/标记,并且可以轻松地对其进行扩展。

At the end of this article you’ll also find a link to my simple web component template repository.

在本文的结尾,您还将找到一个指向我的简单Web组件模板存储库的链接。

建立 (Setup)

For the purpose of demonstration we’ll create a simple web page where our custom web element will be used.

为了进行演示,我们将创建一个简单的网页,其中将使用我们的自定义Web元素。

To check whether our custom element works as expected, I’ll use the tool serve to host our simple web page.

要检查我们的自定义元素是否按预期工作,我将使用该工具用来承载我们简单的网页。

With serve you’ll just have to run the serve . command in the directory where your simple web page resides to boot up a web server, that hosts it on localhost:5000.

使用发球区,您只需运行serve . 简单网页所在目录中的命令来启动Web服务器,该服务器将其托管在localhost:5000

基金会 (The Foundation)

First we’ll extend the HMTMLElement interface to get the required APIs and to register our class as a custom element, so we can use it in our example HTML page.

首先,我们将扩展HMTMLElement接口以获取所需的API并将类注册为自定义元素,因此可以在示例HTML页面中使用它。

Now you can already add it to the web page by importing the javascript file and by inserting the html tag, which we’ve defined in the customElements.define()call as the first argument.

现在,您已经可以通过导入javascript文件并插入html标签(将我们在customElements.define()调用中定义为第一个参数customElements.define()将其添加到网页中。

Do not forget to import the javascript file as type="module" otherwise it won’t get loaded.

不要忘记将javascript文件导入为type="module"否则将不会被加载。

Now we’ve already fulfilled the required steps for utilizing our own web component. Of course, our custom element doesn’t have any content yet but we’re going to change that in the next section.

现在,我们已经完成了利用我们自己的Web组件的必要步骤。 当然,我们的custom元素还没有任何内容,但是我们将在下一部分中对其进行更改。

With this solid foundation we’ll continue and add encapsulated markup structure and styles to our custom element by using the Shadow DOM APIs.

在这个坚实的基础上,我们将继续使用Shadow DOM API将封装的标记结构和样式添加到我们的自定义元素中。

使用影子DOM (Using the Shadow DOM)

As already mentioned the Shadow DOM is a hidden DOM tree, which is attached to your custom element. This ensures that the styles of our custom element aren’t affected by global or another elements styles.

如前所述,Shadow DOM是一个隐藏的DOM树,它附加到您的自定义元素上。 这样可以确保我们的自定义元素的样式不受全局或其他元素样式的影响。

Let’s attach a Shadow DOM to our custom element. We’ll do that in the constructor and choose open as our desired encapsulation mode.

让我们将Shadow DOM附加到我们的自定义元素上。 我们将在constructor执行此操作,然后选择open作为所需的封装模式。

When setting the encapsulation mode to open we’re making sure that our Shadow DOM child elements are accessible via javascript.

将封装模式设置为open我们确保可以通过JavaScript访问Shadow DOM子元素。

Next we should add a template and some styles to our custom element.

接下来,我们应该向我们的自定义元素添加一个模板和一些样式。

Notice that our markup structure resides in a<template> HTML element, which won’t get displayed on the rendered web page.

请注意,我们的标记结构位于<template> HTML元素中,该元素不会显示在呈现的网页上。

The web page should now display the custom element.

网页现在应显示自定义元素。

Image for post

Now, to prove that our custom styles are encapsulated and not affected by the global styles, we add global styles and a simple heading element to our index.html file.

现在,为了证明我们的自定义样式已封装并且不受全局样式的影响,我们向index.html文件中添加了全局样式和一个简单的heading元素。

The web page renders the two headings but with different styles.

网页呈现两个标题,但样式不同。

Image for post

You’ve just created a simple, custom web element with encapsulated style by using just vanilla javascript. Use it as a starting point and extend it to your preferences to create your own unique web elements.

您刚刚使用香草JavaScript创建了一个具有封装样式的简单自定义Web元素。 使用它作为起点并将其扩展到您的首选项,以创建自己的独特Web元素。

You can find the whole example here:

您可以在此处找到整个示例:

翻译自: https://medium.com/@jansommer993/vanilla-web-components-caa1bd83ed86


http://www.taodudu.cc/news/show-8178398.html

相关文章:

  • 香草世界
  • 桌游香草之路
  • Java 买机票
  • 查看电脑重启次数、原因
  • 【Android Exception】android.content.pm.PackageManager$NameNotFoundException
  • php中获取文件夹目录大小写,批量替换目录下面的文件为大写或小写
  • 我不是驴子
  • MVP的一些小知识
  • 驴的一天
  • 【产品学习】从技术转型到产品的一些心得和建议
  • 【Andoid Studio升级】Android Studio new project 或者打开SDK Manager没反应
  • 证据对抗、证据链标准 z
  • python读取crl吊销列表
  • python发送https请求并验证服务端证书
  • 第五讲 其他设置(5)
  • 使用openssl生成根证书以及签发服务器证书
  • 解决An error occurred while calling None.org.apache.spark.api.java.JavaSparkContext. : java.lang.Illeg
  • Linux 之加密类型,CA,Openssl,Openssh
  • RH413企业安全加固 第12章 安装 CA 中心
  • 证书格式与读取
  • ut5311通信接口单元_总线接口与计算机通信(五)CAN总线
  • openssl之带你走CA认证
  • 单元测试之单元测试实战运用、xml运用、csv运用
  • Linux:openssl创建CA及颁发证书
  • 【前端项目资源网站】—— 你想要的都有
  • 鸟叔linux笔记003
  • 鸟叔linux笔记004
  • linux目录含义(摘自-鸟叔linux)
  • 鸟叔的Linux私房菜基础篇-学习笔记(七)
  • 鸟叔菜谱之Linux磁盘管理
  • 这篇关于香草卷筒纸组件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



    http://www.chinasem.cn/article/364878

    相关文章

    Vue中组件之间传值的六种方式(完整版)

    《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

    Spring组件初始化扩展点BeanPostProcessor的作用详解

    《Spring组件初始化扩展点BeanPostProcessor的作用详解》本文通过实战案例和常见应用场景详细介绍了BeanPostProcessor的使用,并强调了其在Spring扩展中的重要性,感... 目录一、概述二、BeanPostProcessor的作用三、核心方法解析1、postProcessB

    kotlin中的行为组件及高级用法

    《kotlin中的行为组件及高级用法》Jetpack中的四大行为组件:WorkManager、DataBinding、Coroutines和Lifecycle,分别解决了后台任务调度、数据驱动UI、异... 目录WorkManager工作原理最佳实践Data Binding工作原理进阶技巧Coroutine

    Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

    《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

    Vue ElementUI中Upload组件批量上传的实现代码

    《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl

    Vue3中的动态组件详解

    《Vue3中的动态组件详解》本文介绍了Vue3中的动态组件,通过`component:is=动态组件名或组件对象/component`来实现根据条件动态渲染不同的组件,此外,还提到了使用`markRa... 目录vue3动态组件动态组件的基本使用第一种写法第二种写法性能优化解决方法总结Vue3动态组件动态

    四种Flutter子页面向父组件传递数据的方法介绍

    《四种Flutter子页面向父组件传递数据的方法介绍》在Flutter中,如果父组件需要调用子组件的方法,可以通过常用的四种方式实现,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录方法 1:使用 GlobalKey 和 State 调用子组件方法方法 2:通过回调函数(Callb

    Vue项目中Element UI组件未注册的问题原因及解决方法

    《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element

    vue解决子组件样式覆盖问题scoped deep

    《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器(/deep/)来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言

    基于Qt Qml实现时间轴组件

    《基于QtQml实现时间轴组件》时间轴组件是现代用户界面中常见的元素,用于按时间顺序展示事件,本文主要为大家详细介绍了如何使用Qml实现一个简单的时间轴组件,需要的可以参考下... 目录写在前面效果图组件概述实现细节1. 组件结构2. 属性定义3. 数据模型4. 事件项的添加和排序5. 事件项的渲染如何使用