◆ すごくたすかる

Chrome 85 で嬉しい変更がありました
これまで 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 を操作できます