🐶
blog.terrier.dev
posted: 2019/10/14

Web Componentsをgatsbyで使えばmdxいらずである程度色々出来る

webcomponents
gatsby
Gatsbyのmarkdownで「ちょっとだけ凝ったことがしたい！」というとき、割とよく出てくるものにmdxを使うという選択肢がある。
ただトランスパイラが面倒になったりで色々と嫌なとこがあり嫌な部分がある。
そこでWebComponentsが使えそうだ。
タイマーのサンプルはこんな感じ↓
コードはこんな具合だ。
import { css } from "styled-components"

const container = css`
  border: dotted 3px #ccc;
  padding: 1em;
`
export class SampleTimer extends HTMLElement {
  constructor() {
    super()
  }
  connectedCallback() {
    const shadowRoot = this.attachShadow({ mode: "open" })
    window.setInterval(() => {
      shadowRoot.innerHTML = this.template()
    }, 500)
  }
  template() {
    return `<div style="${container}">現在時刻: ${new Date()}</div>`
  }
}
あとはdefineすれば使える。ただgatsbyの場合SSRのタイミングで壊れるのでwindowのアリナシで判定してrequireを使う必要がある（dynamic importでも良いかもしれない）
if (typeof window !== `undefined`) {
  const { StackbritzIframe } = require("./Stackblitz")
  const { SampleTimer } = require("./SampleTimer")

  customElements.define("stackblitz-iframe", StackbritzIframe)
  customElements.define("sample-timer", SampleTimer)
}
Markdown側にこんなふうに書けばOKだ
<sample-timer></sample-timer>
Edit on Github
@terrierscript