更新于 

html

Web/API

shadow dom

ShadowRoot

公司的项目用的是jquery框架，
组件封装用的是HTMLElement，
组件内部的结构全部使用shadowRoot进行包装。

HTMLElement自定义组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
class MyHello extends HTMLElement{
    constructor() {
        super();
        // 创建组件的 Shadow DOM
        this.attachShadow({mode:'open'})
        // 创建组件内部的元素
        const container = document.createElement('div')
        container.setAttribute('class', 'container')
        const content = `
            <img width="100px" src="./img/toby_dog.jpg" alt="">
            <div class="li-content">
                <p class="li-title">List Tag</p>
                <p class="li-content">List Content</p>
            </div>
        `
        container.innerHTML = content
        // 样式设置
        const style = document.createElement('style')
        style.textContent = `
            .container{
                border:1px solid #000;
                display:flex
            }
            .li-content{
                border:1px solid #000;
            }
            .li-title{
                font-weight:bold
            }
            .li-content{
            }
        `
        // 将元素添加到Shadow DOM中
        this.shadowRoot.appendChild(container)
        this.shadowRoot.appendChild(style)
    }
}
// 注册自定义组件
customElements.define('my-hello', MyHello)


1
2
3
4
5
6
<head>
    <script src="components/my_hello.js"></script>
</head>
<body>
    <my-hello></my-hello>
</body>

标签

img

img标签图片自适应

问题描述

使用img标签展示图片时，一直不知道如何实现调整图片尺寸的同时保持原始长宽比。
以往都是用css里的background-img来实现这一功能， 这个问题一直都没解决。
之前听说如果在img标签上只设置width，即可保持长宽比，但是好像没什么用。

解决方法
https://blog.csdn.net/z2181745/article/details/114919271https://blog.csdn.net/z2181745/article/details/114919271

使用css中的object-fit属性，
类似于background-size属性
可以控制img标签展示图片的模式，可选值有：

fill|contain|cover|scale-down|none|initial|inherit;

input

input:file上传同一个文件时，change不触发

问题描述

在使用input:file时，一般会绑定一个onChange事件，用来监听文件上传事件，
但是如果反复上传同一份文件，只有第一次上传会触发change事件。

解决方法
https://blog.csdn.net/chelen_jak/article/details/89358075https://blog.csdn.net/chelen_jak/article/details/89358075

上传的文件路径会被存储在 $event.target.value中，
因此需要每次都将 $event.target.value 清空：

1
2
3
function change(e){
    e.target.value = null
}

video

video标签无法自动播放

问题描述

video标签已经设置了autoplay属性，视频依旧无法自动播放

解决方案

参考博客：video 标签无法自动播放

需要把muted属性和autoplay属性一起配置上去:

1
<video src="./citywalk.mpp4" autoplay muted></video>

video加载blob格式视频

问题描述