JavaScript之shadow DOM与slot

最新推荐文章于 2024-01-04 13:14:17 发布

艳阳高照中最亮的星

最新推荐文章于 2024-01-04 13:14:17 发布

阅读量394

点赞数

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/fgangen/article/details/118575810

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
    <div>普通的dom节点</div>
    <div id="container">
	 <p slot="p1">我是container内原有的dom子节点11，可以理解为一条数据，按顺序插入到对应的slot中</p>
        <p slot="p2">我是container内原有的dom子节点24，可以理解为一条数据，按顺序插入到对应的slot中</p>
        <p slot="p1">我是container内原有的dom子节点11，可以理解为一条数据，按顺序插入到对应的slot中</p>
         <p slot="p2">我是container内原有的dom子节点p22，可以理解为一条数据，按顺序插入到对应的slot中</p>
        <p slot="p2">我是container内原有的dom子节点p21，可以理解为一条数据，按顺序插入到对应的slot中</p>
        <p slot="p1">我是container内原有的dom子节点12，可以理解为一条数据，按顺序插入到对应的slot中</p>
        <p slot="p2">我是container内原有的dom子节点p23，可以理解为一条数据，按顺序插入到对应的slot中</p>
    </div>
</body>
</html>

javascript：

    const container = document.querySelector('#container'); // shadow host
    const shadow = container.attachShadow({ mode: 'open' }); // shadow root
    shadow.innerHTML = `slot begin
    <slot name="p1"></slot><slot name="p2"></slot><slot name="p3"></slot>slot end`;

显示：
在这里插入图片描述

可以看到，#container实际显示的是js中的slot begin 到 slot end 的内容
原#container内的内容可以理解为被转换成一条一条的数据插入了slot begin 到 slot end 之间的slot中
对应关系为 slot=“p1” ->slot name=“p1”
即，本来html提供的是模板，js提供数据，而现在html提供的是数据，js提供了数据呈现的模板。

艳阳高照中最亮的星

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript之shadow DOM与slot

在找怎么自定义html标签的时候，找了相关内容，闷头想了很html代码：<!DOCTYPE html><html><head><meta charset="utf-8"><title>文档标题</title></head><body> <div>普通的dom节点</div> <div id="container"> <p slot="p
复制链接

扫一扫