amp-script で button タグの属性の変更が HTML に反映されない

知らなかったのでメモ。amp-script で <button> の属性の変更が HTML に反映されない話です。

例えば、こんなボタンを作り…。

<button id="sample-button" type="button">classを変更</button>

クリックする度に、<button> の class に changed の追加と削除を繰り返すとします。

const button = document.getElementById('sample-button');
button.addEventListener('click', function() {
  this.classList.toggle('changed');
});

そして、changed を使い、CSS を書くとします。

.changed {
  background: pink;
}

これらをしたのが下のボタンです。クリックする度に背景色が変わるはずですが変わりません。

理由は、クリックしても HTML 上では class が変化しないため。ただ、コンソールに Element.attributes で取得した <button> の属性の一覧を出力していますが、そちらでは class の追加と削除ができています。

もし、<div> でボタンを作ると…。

<div id="sample-button" tabindex="0" role="button">classを変更</div>

こちらはクリックする度に背景色が変わります。

<div> などは属性の変更が HTML に反映されますが、<button> は属性の変更が HTML に反映されませんでした。他に element.setAttribute() なども試しましたが、<button> の HTML は変化しませんでした。

そのため、<button> での aria-* の変更は注意すべきかもしれません。私が初めて気が付いたのは、aria-expanded の変更が HTML に反映されなかった時です。また、変更した属性を使い CSS を指定する時も注意が必要だと思います。

ただ、変更されないのは HTML 上の属性です。属性自体は変更できており、かつ変更した属性は取得し使えます。

例えば、このような HTML を書き…。

<button id="sample-button" type="button">テキストを変更</button>
<p id="sample-text">ボタンの現在の class は？</p>

このように書いてみます。

const button = document.getElementById('sample-button');
const text = document.getElementById('sample-text');

button.addEventListener('click', function() {
  this.classList.toggle('changed');
  const buttonClass = this.className === '' ? '空' : this.className;
  text.textContent = 'ボタンの現在の class は ' + buttonClass + ' です。';
});

そうすれば、クリックする度に変わる <button> の class を element.className で取得し、テキストに反映できます。

尚、amp-script は、WorkerDOM の仕様に沿う必要があります。WorkerDOM で使用できる DOM API は、WorkerDOM compatibility で確認できます。HTMLButtonElement.disabled や HTMLButtonElement.value など <button> を操作するプロパティも使えます。

また、amp-bind であれば、<button> の属性の変更を HTML に反映できます。

WorkerDOM compatibility の現在の一覧では、HTMLElement.style は使用不可になっています。

ですが、使えました。このような HTML があって…。

<div id="sample-box" style="background: aquamarine;">
  <button id="sample-button" type="button">色を変更</button>
</div>

このように書いてみます。

const box = document.getElementById('sample-box');
const button = document.getElementById('sample-button');

button.addEventListener('click', () => {
  box.style.background = 'pink';
});

すると、ボタンのクリックでボックスの背景色がピンクになります。

エラーは確認できないため、使っても問題なさそうです。