Svelte 是建構 Web 應用程式的一種新方法，推出後一直不溫不火，沒有繼Angular、React和VUE成為第四大架構，但也沒有失去熱度，無人問津。造成這種情況很重要的一個原因是，Svelte 的核心思想在于【通過靜态編譯減少架構運作時的代碼量】，它可以像React和VUE一樣開發，但卻沒有虛拟DOM。，使它可以Svelte可以将代碼編譯為體積小、不依賴于架構的JS代碼。
看起來滿滿優點，但因為過于靈活，導緻大家無法寫出高度一緻的業務代碼，以上優點并沒有在實際的大項目中得到很好的展現。
Svelte 這款架構并不完美，卻又沒有在殘酷的市場競争中死掉，是因為它擁有一本特殊秘籍，一些使它成為其他架構無法替代的一員的功能。。
而對于 Svelte 來說，這本秘籍的名字就叫做——Web Components。
在多團隊協同完成的大項目中，各個團隊可能使用不同的架構版本，甚至不同的架構，這讓不同項目之間的元件複用變得困難。"write one，run anywhere"就是一句空話。這種情況下Svelte就變成了溝通跨越架構鴻溝的橋梁，使用Svelte開發的無架構依賴的Web Components，可以在各個架構間複用。同時，Svelte的開發方式也不像寫pure js那樣繁瑣。
下面以SpreadJS內建為例，介紹如何用Svelte開發一款spread-sheets Web Component供其他頁面複用。
建立Svelte template工程。
svelte 官方提供了template 工程，隻要clone或者下載下傳項目即可。
https://github.com/sveltejs/component-template
修改 rollup.config.js，添加 customElement: true 配置，輸出為web component元件。
添加後的rollup.config.js如下。
更新 src/Component.svelte，建立spread-sheets元件。
這樣我們的自定義元件就建立好了，隻需要調用npm run build，就能編譯出spread-sheets 元件了。
在頁面引用元件。
建立index.html頁面，并引用編譯好的js檔案。同時引入spreadjs相關資源。
直接使用spread-sheets标簽添加SpreadJS。
添加後效果如下圖。
雖然看起來Web Component完美解決了元件之間的複用問題，但是用Svelte 開發的Web Component也存在一些限制：比如，隻能傳遞string 屬性；綁定的attribute是單向綁定，想要擷取元件内部更新值，需要綁定event擷取。
如果大家對Svelte 有更多興趣，歡迎留言交流~
本文是由葡萄城技術開發團隊釋出，轉載請注明出處：葡萄城官網