html5-新标签

年龄稍大一点的码农可能见证了html的发展,亲历了头声明的变化,但是现在起步就是html5,那么html有哪些不为大家常用的新东西呢,这一章我先来谈谈这个问题。

1 dialog标签------弹窗标签。

弹窗可能前端一路走来,见过很多。甚至现在我们在用各种UI库的时候这个弹窗也是必须的一个功能。

这个标签支持的api:

show: 展示弹窗框,采用决定定位,

showModel: 展示弹窗,并带有遮罩,采用了一个特殊的#top-layer的标记层,会位于整个页面的最顶层,且水平,垂直居中。通过::backdrop伪元素控制其遮罩的透明度。

close: 关闭上述的弹窗。

事件:支持一个close事件,并且在close中可以拿到returnvalue,可用用来判断关闭事件传递的参数。比如你通过那个按钮关闭的弹窗。如果弹窗里面有表单,设置了method="dialog"表单的提交动作可以自动关闭弹窗。这时这个close中可以通过returnValue获取到点击按钮的值。

2 component---自定义标签

这个没错这就是html5原生支持的自定义组件,当然实现起来还是要借助js来完成。当然他里面也能做得到css和js的隔离(通过shadow)。也支持插槽,也有生命周期的概念。当然也有相应的框架和UI组件库。

复制代码
  <my-element>
    #shadow-root
      <style>
        p { color: red; }
      </style>
      <p>This is in shadow DOM and styled red.</p>
  </my-element>
  
  <template id="my-template">
    <p>My Template</p>
  </template>

参考的地址:

https://developer.mozilla.org/zh-CN/docs/Web/API/Web_components/Using_custom_elements

html lit框架

Lit

下面基于Lit举一个例子

复制代码
  <div id="app">
    <div class="hello">i'm from browser</div>
    <hello-world></hello-world>
  
    <!--模板部分-->
    <template id="hello">
      <style>
        .hello {
          color: red;
        }
      </style>
      <div class="hello">hello world</div>
    </template>
  </div>
  <script>
    class HelloWorld extends HTMLElement {
      constructor () {
        super()
        const shadow = this.attachShadow({
          mode: 'open'
        })
        // 这里我们直接获取页面中的 template
        const div = document.getElementById('hello')
        shadow.appendChild(div.content.cloneNode(true))
      }
    }
    customElements.define('hello-world', HelloWorld)
  </script>
相关推荐
yanyu-yaya7 分钟前
第四章 react-redux,@reduxjs/toolkit依赖,学习
前端·学习·react.js
小付同学呀12 分钟前
前端快速入门学习3——CSS介绍与选择器
前端·css·学习
Jenlybein13 分钟前
快速了解浏览器原理及工作流程
前端·浏览器
醋醋13 分钟前
vue2源码记录(2)
前端·vue.js
前端飞天猪14 分钟前
学习笔记:企业级Git代码规范与协作指南💖
前端·github
艾克马斯奎普特14 分钟前
Vue.js 3 渐进式实现之响应式系统——第五节:分支切换与 cleanup
前端·vue.js
总之就是非常可爱15 分钟前
五分钟看懂 alien signals 依赖收集原理
前端·vue.js
Bruce_Liuxiaowei16 分钟前
基于Flask的Windows命令大全Web应用技术解析与架构设计
前端·windows·python·flask
EricXJ17 分钟前
npm、Yarn、pnpm Workspace 对比
前端·javascript
DoraBigHead20 分钟前
🔬 深度解析:前端异步模型的本质机制与工程落点
前端