逍遥阁

web组件开发二

关键词: web组件

web组件开发二

```
<script>
window.customElements.define('标签名称', 类名称);
window.customElements.define('标签名称', 类的直接定义);
window.customElements.define('标签名称', 类名称, {extends: 'p或者ul'});

class dryCard extends HTMLElement或者HTMLParagraphElement或者HTMLUListElement{
    constructor(){
        super();
        const shadow = this.attachShadow({mode: 'open或者closed'});
    }

static get observedAttributes(){return ['a', 'b'];}

connectedCallback(){}

disconnectedCallback(){}

adoptedCallback(){}

attributeChangedCallback(name, oldValue, newValue){}
}
window.customElements.define('dry-card', dryCard);

window.customElements.define('dry-card',
    class extends HTMLElement{
        constructor(){
            super();
        }
    }
);
</script>
```

1.标签名称必须要有短横线

2.获取标签的属性值用this.getAttribute('name')，类似的方法有getAttribute('')和hasAttribute('')

3.html代码里面这样使用标签`<dry-card name="test"></dry-card>`或者`<p is="dry-card">`

4.template的使用

```
<template id="t">
html代码
</template>
```

```
var node = document.getElementById('t').content.cloneNode(true);
shadow.appendChild(node);
```

node相当于body标签

shadow也相当于body标签，并且内部的元素始终不会影响到它外部的元素

template里面的样式只在自定义标签内部有效

5.类的定义里面必须先调用super()

6.如果组件的定义单独放在js文件里面则需要这样引用

```
<script src="main.js" defer></script>
```

defer不能省略

7.常用html操作

```
const p = document.createElement('p|div|style|span');
p.textContent = '';

document.createElement("p", {is: "dry-card"});

元素.appendChild(元素);

document.querySelector('html').addEventListener('click', function(){});

document.querySelectorAll('');

元素.parentNode.insertBefore();

元素.parentNode.removeChild();

元素.childNodes;

元素.nodeName;

元素.shadowRoot;

元素.classList.add('tedt');
```

8.生命周期函数

connectedCallback->当首次被插入文档DOM时被调用

disconnectedCallback->当从文档DOM中删除时被调用

adoptedCallback->当被移动到新的文档时被调用

attributeChangedCallback->当增加、删除、修改自身属性时被调用

9.observedAttributes表示监听哪些属性的变化

10.槽

```
<p><slot name="a">不支持slot标签时的默认文字</slot></p>

<my-paragraph>
    <span slot="a">文字</span>
</my-paragraph>
```

槽使用name属性作为id

admin
2019-10-28 17:34:19
html

文章分类

文章标签

文章归档

友情链接

web组件开发二