HTML

タグ

section

<section>

レイアウト用のコンテナ要素はdiv

<article>、<aside>、<nav>の方が具体的

aside

補足のsection

divにはhtmlに構造をつける上で意味がある。何もしていないdivは不要。

参考

----

TemplateとSlot

再利用性のためTemplateを使用する。

slotで任意の値を代入できる。

code:html

<p><slot name="my-text">デフォルトテキスト</slot></p>

<my-paragraph>

<span slot="my-text">新しいテキストを代入します</span>

</my-paragraph>

Shadow DOM により、通常の DOM ツリーの要素の下に DOM ツリーを追加し隠すことができます。shadow DOM ツリーは shadow root を根とし、その下には普通の DOM ツリーと同様に任意の要素を追加できます

CSSを上書きするには

CSSは直接を上書きすることはできない。CSSをShadow DOMにInjectする必要がある。

Pug

htmlビルドツール

Form

form postさせない

React時、エンターでsubmitされないようにする。

code:jsx

button

submit

reset

上記以外をtypeに設定したときは、form postされる

e.preventDefault()

e.stopPropagation();

イベントの伝播を停止

----

onsubmitでreturn falseするパターン

onsubmit="handleSubmit(event);return false;"

code:js

const form = document.getElementById('form');

form.onsubmit = submit;

function submit(event) {

event.preventDefault();

}

Validate

以下を仕込む手もある？

code:js

<Form.Control

type='text'

className={'d-none'}

/>

novalidate

送信時に検証しない

同じname属性にすると、配列として取得できる。

code:html

<form>

<input type="radio" name="sample" value="0">

<input type="radio" name="sample" value="1">

</form>

TextAreaの文字数カウント

textarea文字数カウントが環境によって異なる

androidだと改行は1文字？

jsでカウントする場合、改行コード、macOS,Android各種環境に応じてカウントする必要がある？

webkitによる影響もある？

参考

DOM

Element

jsのselectorで取得できるやつ

iframe

Youtube埋め込み仕様

?controls=0

コントロールバーを表示させない。

データ属性

code:html

<article

id = "article1"

data-index-number="12314"

</article>

code:js

const article = document.getElementById('article1');

article.dataset.indexNumber // "12314"

DOM要素変化の監視

audioタグ

loopは基本的にメジャーのブラウザーに対応している。

バックグラウンド時に、JavaScriptのplayメソッドはブロックされる場合がある？