Web Component
===
## 目錄
[TOC]
## 簡報連結
[如何用Web Component發大財](https://speakerdeck.com/milkmidi/webcomponent)

## 徵才
[Positive Grid 徵才中](https://www.104.com.tw/company/1a2x6bipks?jobsource=company_job)

## Performance
以往早期的網站都是server side render，也比較有利於SEO。現在多使用virtual dom，但未必有利於seo。蝦皮用react所以會看到js最後載入，因為他最後才會讀到js，所以一開始蝦皮會有一段時間空白，最後才會跑出來。

## code 起源
十年前寫code多用flash，可以跨平台都可以使用的，不會現在因為什麼瀏覽器而有問題，但現在可能都因為不同的瀏覽器支援而常常會有不同環境跑不出來的問題。

大部分的時間都會學新的東西，每一年都會有新的技術出來要學。同時這也是保有自己競爭力的方式。

## web development trends in 2024
- React/ Vue/ Angular
- GraphQL
- TailwindCSS
- webassembly
高運速效能的
- Webpack/Vite
- No Jquery
- test
code.ai產生unit test免錢
- e2e test

## 修改與技術
PM請你修改這樣的東西你會怎樣做？

<div>
    <button class="sign-in">Sign In</button>
    </div>

若用document.queryselector可能會有權限太大問題，真的是不建議

可以用原生寫法

善用web component 都可以比較好找到事件。

若有些東西採用不採用，都可以往前三代向前相容

## Extend

safari 支援度比較低。

class MyATag extends 

## 生命週期

就只有這些生命週期重要啦

class MyComponent extends HTMLElement {
    constructor() {
        super();
    }
    connectedCallback() {}
    disconnectedCallback() {}
    attributeChangedCallback(name, oldValue, newValue) {}
    static get observed Attributes() {
    return ['some-attrib']
    }
}

## 原生就可以模擬套件啦
原生也可以這樣模擬vue的props

## shadow dom
- 隔絕全域問題
若這樣放在shadow dom裡面就不會影響到全域的問題，shadow dom就只會影響他的scope內部的資料。


- 外部開放影響
若用open 就可以透過外部操控shadow dom ，若用close就不會使用。

- 內部更改外部style
使用:host的時候就可以透過內部shadow dom更新外部的style

- 外層document修改內部
可以透過part來做相關的修改。

### ShadowRoot :adoptedStyleSheet
支援度還很低，知道就好

### slot
Dom元素也可以模擬slot，但仍舊會吃到外層的style，因為是從外面塞進去

class Slot extends HTMLELement {
    constructor() {
        super();
        const shadow = this.attachShadow
        shadow innerHTML =
        <div>
            <slot></slot>
        </div>
}
}

- slot with name
也可以從外層塞name進去

希望

- shadowrootmode
這個可以直接從內部修改shadow dom，

## Webcomponent +react/vue

## web component的好
不同的框架的三個網站若想共用同一個header。
可以用
- iframe
缺點很慢，雖然安全
- Federation plugin
可以把package拉出來，但可能要改架構，style要互吃
- web-component
一個js就完美解決。

<script src="https://....h/header.js"></script>
<hi-header></hi-header>

vue 可能virtual dom之後id就會被殺掉，原本寫的監聽方式就會失效，所以不會使用vue。