不知道各位有沒有注意到，昨天的文章。在HTML中custom element看起來就像其他的html element一樣。是的，只看element本身，普通的html element可以做到的事情，custom element也是使用相同的方法。

CSS的部分

如同普通的HTML element可以在CSS選擇器中使用，custom element的名稱也同樣可以使用，而且權重和HTML element 一樣

my-element + p {
    color: red;
}

<my-element></my-element>
<p>Hallo world!</p>

JS的部分

建立和獲取custom element

如同普通的HTML element，Document.getElementById()、Document.querySelector()或是Document.createElement()之類的方法都可以正常的使用

<my-element id='id1' class='class1'></my-element>

const element1 = document.getElementById('id1')
const element2 = document.querySelector('my-element')
const element3 = document.querySelector('.class1')
const element4 = document.createElement('my-element')

取得custom element 屬性值

對custom element來說，普通的HTML element會有的屬性值，custom 也會有。

<my-element id='id1' class='class1'  data-v='v1'></my-element>
<p id='id2' class='class2' data-v='v2'></p>

const customE = document.getElementById('id1')
const pE = document.getElementById('id2')
console.log(customE.classList)
console.log(pE.classList)
console.log(customE.dataset)
console.log(pE.dataset)
console.log(customE.offsetHeight)
console.log(pE.offsetHeight)

設定custom element 的事件

一句話，普通的HTML element如何使用，custom element就如何使用

<my-element id='id1' class='class1'  data-v='v1'></my-element>
<p id='id2' class='class2' data-v='v2'></p>

const customE = document.getElementById('id1')
const pE = document.getElementById('id2')
customE.addEventListener('click', () => {
    console.log('click')
})
pE.addEventListener('click', () => {
    console.log('click')
})