adoptedStyleSheets に設定したスタイルを devtools で編集できるようになった
◆ すごくたすかる
Chrome 85 で嬉しい変更がありました
これまで Custom Element 内のスタイルを定義するために adoptedStyleSheets を使うとそのスタイルは devtools で編集できませんでした
そのせいでちょっとしたスタイル調整が面倒だったのですが これが可能になりました
こんなページを用意して開いた場合 devtools の Elements タブで foo-bar 要素の Shadow DOM 内の div を選択すると右側の Styles タブ内で background や padding を操作できます
これまで Custom Element 内のスタイルを定義するために adoptedStyleSheets を使うとそのスタイルは devtools で編集できませんでした
そのせいでちょっとしたスタイル調整が面倒だったのですが これが可能になりました
<!doctype html>
<script type="module">
const template = document.createElement("template")
template.innerHTML = `
<div>aaaa</div>
`
const sheet = new CSSStyleSheet()
sheet.replaceSync(`
div {
background: aqua;
padding: 10px;
}
`)
customElements.define("foo-bar", class extends HTMLElement {
constructor() {
super()
const root = this.attachShadow({ mode: "open" })
root.adoptedStyleSheets = [sheet]
root.append(template.content.cloneNode(true))
}
})
document.body.innerHTML = `<foo-bar></foo-bar>`
</script>
こんなページを用意して開いた場合 devtools の Elements タブで foo-bar 要素の Shadow DOM 内の div を選択すると右側の Styles タブ内で background や padding を操作できます
