cincijs.md

marp	true

Form associated custom elements!

It's about time...

---

Our problem

• That ancient developer nemesis: timezones
• Q: Does anybody really know what time it is?
• A: the browser does

---

What do we want?

• User sees local time
• Server sees UTC
• (this bullet point intentionally left blank)

---

I know! We'll use custom elements!

• datetime-utc-elements npm
• datetime-utc-output takes UTC and displays in browser local
• datetime-utc-input let user input in browser local but sends UTC to server

---

datetime-input version 0.0.2

• datetime-local input
• hidden field for UTC
• keep em in sync
• worked like champ

---

Let's see

---

Then I read this

---

Let's make a form associated Custom Element

• static property formAsociated = true
• this.attachInterals() gives us an ElementInternals

---

What's an ElementInternals?

• This!
• Not even an MDN page yet
• Chrome only so far
• But there is a polyfill

---

internals.setFormValue()

• updates the form's FormData
• uses the name attribute
• can take
  • String
  • File
  • FormData

---

Let's see it!

---

Form validation API

• internals.setValidity()
  • validityState
  • message (optional)
  • internal input element (optional)