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>
相关推荐
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
我要洋人死2 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人3 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人3 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR3 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香3 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596933 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai3 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书