web component使用(三)

Abelce

于 2019-06-02 13:46:57 发布

阅读量663

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习 web component 文章标签： webcomponent

本文链接：https://blog.csdn.net/m0_37566424/article/details/90738645

前端学习同时被 2 个专栏收录

25 篇文章

订阅专栏

web component

3 篇文章

订阅专栏

本文探讨了在网页设计中如何运用<template>和<slot>元素提升组件灵活性，通过实例展示了如何创建可复用的HTML结构，并通过JavaScript动态填充内容，实现页面元素的高效管理和个性化定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用template和slot创建弹性模版，提高组件的灵活性

template

在网页上使用重复的html的时候，使用模版<template>比直接复制显然是更好的选择，不会被DOM直接的渲染出来，但通过javascript可以获取到

        <template id="custome-detail">
            <style>
                fieldset {
                    border: none;
                    border-top: 1px solid #cccccc;
                }
            </style>
            <fieldset>
                <legend>
                    custome fieldset
                </legend>
                <p>this is a paragraph</p>
            </fieldset>
        </template>

slot

槽(slot)是一个html占位符，使用name属性作为id,将上面的模版修改如下

<template id="custome-fieldset">
            <style>
                fieldset {
                    border: none;
                    border-top: 1px solid #cccccc;
                }
            </style>
            <fieldset>
                <legend align="center">
                    <slot name="title">custome fieldset</slot>
                </legend>
                <slot name="content">this is a paragraph</slot>
            </fieldset>
        </template>

在html中的使用：

 <custome-fieldset>
            <span slot="title">Hello world</span>
            <p slot="content">This is content</p>
        </custome-fieldset>

        <custome-fieldset>
            <span slot="title">list</span>
            <dl slot="content">
                <dt>name</dt>
                <dd>Abelce</dd>
            </dl>
            <dl slot="content">
                <dt>sex</dt>
                <dd>male</dd>
            </dl>
        </custome-fieldset>

代码[github](