当前位置:网站首页>Web components series - detailed slides
Web components series - detailed slides
2022-07-04 16:07:00 【Xianling Pavilion】
Preface
be familiar with Vue I think all of you know that ” slot (slot)“ The concept of , Using slots can make the organization of page content more flexible .
stay Web Components There is also the concept of slots in the system , Today, let's have a specific look Slots, This article mainly includes the following contents :
Why use Slots ?
Slots Related characteristics of
Slots The role of
Let's first look at a template element :
<template>
<div class = "header">MY CARD</div>
<div class="details">
My name is The samadhi of programming .
</div>
</template>
Copy code
Since it's a template , That means it will be used in many places , however , There's a problem here : All places that use this template will display the contents of the template , That is, not everyone's name is ” The samadhi of programming “.
under these circumstances , People with other names cannot use this template , obviously , This is contrary to the original intention of using templates , The scope of use of this template is too narrow , There is no universality .
Want to make this template universal , The key point is .details Is the content displayed in universal .
Use your head to think , Can we put one of them ” The samadhi of programming “ Set as dynamic content , Who uses this template , Whoever passes in his own name . just , Slots( slot ) This effect can be achieved , As follows :
<!-- Used in templates slot To carry on the placeholder -->
<template id="cardTmp">
<div class="header">MY CARD</div>
<div class="details">
My name is <slot name="userName"> The samadhi of programming </slot>.
</div>
</template>
<!-- In the user-defined element using the above template slot Pass value -->
<my-card>
<span slot="userName"> Slot transfer value </slot>
</my-card>
<my-card>
<span slot="userName">web Components</slot>
</my-card>
Copy code
Their corresponding JS The code is as follows :
class MyCard extends HTMLElement {
constructor () {
super();
const template = document.getElementById('cardTmp');
const templateContent = template.content;
this.attachShadow({
mode: 'open'}).appendChild(
templateContent.cloneNode(true)
);
}
}
customElements.define('my-card', MyCard);
Copy code
Realization effect :
Through the example above , We can sum it up in one sentence Slots The role of :Slots The function of is to pass values to template elements , Enhance the flexibility and versatility of template elements .
Slots Related characteristics of
about Slots Related characteristics of , I explain one by one in the form of questions and answers .
Slots Of name What's the use of attributes ?
With designation name Of Slots go by the name of ” A named slot “,name yes slot Unique identification of .
You need to use and... On the element that introduces the slot content Slots.name Same value slot attribute . Look at the code below :
<template id="cardTmp">
<div class="header">MY CARD</div>
<div class="details">
My name is <slot name="userAge">19</slot>.
</div>
</template>
<my-card>
<span slot="userName"> The samadhi of programming </slot>
</my-card>
<my-card>
<span slot="userName">web Components</slot>
</my-card>
<script>
class MyCard extends HTMLElement {
constructor () {
super();
const template = document.getElementById('cardTmp');
const templateContent = template.content;
this.attachShadow({
mode: 'open'}).appendChild(
templateContent.cloneNode(true)
);
}
}
customElements.define('my-card', MyCard);
</script>
Copy code
Running effect :
Because of the incoming slot Property values and Slots Of name The attribute value does not match , therefore Slots Not inserted .
When transferring values slot The property value must be the same as Slots Of name Property values are consistent .
Do not give Slots What happens when you transfer values ?
Add the above two custom elements my-card Medium span Element removal , No value passed , Change it to this :
<my-card></my-card>
Copy code
The effect after running :
You can see , If not Slots Pass value , that Slots It will display its own preset content .
In fact, combining the above two points , There is also a conclusion : If there is a reference Slots , There is only correspondence name Of Slots The content will be displayed , The rest Slots No display .
normal DOM Can be used in Slots Do you ?
there ” normal DOM“ Is relative to Shadow DOM Speaking of , It refers to the document object where the page is located .
The code is as follows :
<slot name="userName">Slots Default </slot>
<div slot="userName">bcsm</div>
Copy code
It is shown as follows :
summary : normal DOM Use in Slots, It will render directly on the page , There must be no slot effect .
Slots Does it have to be used in Templates in ?
In the example we saw earlier ,Slots Is in Templates in , Does that mean Slots Must be used in Templates In order to take effect ?
Because it has been verified that in normal DOM Medium Slots It's invalid , So we are Shadow DOM Do a test in , The code is as follows :
<body>
<h1> be not in Templates Use in Slots</h1>
<div id="templ">
<slot name="userName"> This is a Slots Default </slot>
</div>
<my-paragraph>
<span slot="userName"> The samadhi of programming </span>
</my-paragraph>
<script>
class MyParagraph extends HTMLElement {
constructor () {
super();
const template = document.getElementById('templ');
this.attachShadow({
mode: 'open'}).appendChild(
template.cloneNode(true)
);
}
}
customElements.define('my-paragraph', MyParagraph);
</script>
</body>
Copy code
The display effect is as follows :
You can see from the display effect , Will include Slots It's normal DOM Nodes are being appended to Shadow DOM after ,Slots Displays the value passed in , in other words Slots It's in effect .
summary :Slots stay Shadow DOM Can take effect , It doesn't have to be used in Templates in .
You can use more than one user-defined element with the same name Slots Do you ?
Look at the code :
<template id="cardTmp">
<div class="header">MY CARD</div>
<div class="details">
My name is <slot name="userName"> The samadhi of programming </slot>.
</div>
</template>
<my-card>
<span slot="userName"> Slot transfer value 1</span>
<span slot="userName"> Slot transfer value 2</span>
</my-card>
<script>
class MyCard extends HTMLElement {
constructor () {
super();
const template = document.getElementById('cardTmp');
const templateContent = template.content;
this.attachShadow({
mode: 'open'}).appendChild(
templateContent.cloneNode(true)
);
}
}
customElements.define('my-card', MyCard);
</script>
Copy code
According to the effect :
Conclusion : One Slots You can receive multiple incoming values , And it will be parsed and displayed .
Slots Must the value passing element of be the direct child element of the user-defined element ?
In the example above , All for Slots The elements that pass values are all child elements of user-defined elements , Is it not possible to use indirect sub elements ?
The code is as follows :
<template id="cardTmp">
<div class="header">MY CARD</div>
<div class="details">
My name is <slot name="userName"> The samadhi of programming </slot>.
</div>
</template>
<my-card>
<div>
<span slot="userName"> Slot transfer value 1</span>
</div>
</my-card>
<script>
class MyCard extends HTMLElement {
constructor () {
super();
const template = document.getElementById('cardTmp');
const templateContent = template.content;
this.attachShadow({
mode: 'open'}).appendChild(
templateContent.cloneNode(true)
);
}
}
customElements.define('my-card', MyCard);
</script>
Copy code
Running effect ( Value transmission failure ):
Conclusion : to Slots The value passing element must be the direct child element of the user-defined element , Otherwise, the value transmission is invalid .
Last
If you think this article is of little help to you , Point a praise . Or you can join my development communication group :1025263163 Learn from each other , We will have professional technical questions and answers
If you think this article is useful to you , Please give our open source project a little bit star:http://github.crmeb.net/u/defu Thank you for !
PHP Learning manual :https://doc.crmeb.com
Technical exchange forum :https://q.crmeb.com
边栏推荐
- Implementation of web chat room
- Interpretation of the champion scheme of CVPR 2020 night target detection challenge
- 数据湖治理:优势、挑战和入门
- Proxifier global agent software, which provides cross platform port forwarding and agent functions
- %F format character
- Shell programming basics
- Go deep into the details of deconstruction and assignment of several data types in JS
- PR FAQ: how to set PR vertical screen sequence?
- Understand the context in go language in an article
- Audio and video technology development weekly | 252
猜你喜欢
[tutorial] yolov5_ DeepSort_ The whole process of pytoch target tracking and detection
MySQL学习笔记——数据类型(数值类型)
这几年爆火的智能物联网(AIoT),到底前景如何?
Weekly recruitment | senior DBA annual salary 49+, the more opportunities, the closer success!
华为云数据库DDS产品深度赋能
Common API day03 of unity script
直播预告 | PostgreSQL 内核解读系列第二讲:PostgreSQL 体系结构
每周招聘|高级DBA年薪49+,机会越多,成功越近!
QT graphical view frame: element movement
Unity脚本生命周期 Day02
随机推荐
LNX efficient search engine, fastdeploy reasoning deployment toolbox, AI frontier paper | showmeai information daily # 07.04
. Net delay queue
直播预告 | PostgreSQL 内核解读系列第二讲:PostgreSQL 体系结构
web聊天室实现
Talking about Net core how to use efcore to inject multiple instances of a context annotation type for connecting to the master-slave database
.Net 应用考虑x64生成
函数式接口,方法引用,Lambda实现的List集合排序小工具
2022年九大CIO趨勢和優先事項
Hidden communication tunnel technology: intranet penetration tool NPS
Stress, anxiety or depression? Correct diagnosis and retreatment
[Dalian University of technology] information sharing of postgraduate entrance examination and re examination
Width accuracy
hexadecimal
Explore mongodb - mongodb compass installation, configuration and usage introduction | mongodb GUI
JS tile data lookup leaf node
Salient map drawing based on OpenCV
每周招聘|高级DBA年薪49+,机会越多,成功越近!
Enter the width!
Case sharing | integrated construction of data operation and maintenance in the financial industry
What is the catalog of SAP commerce cloud