Two Paradigms for Enhancing HTML Tags

Avlärande av Unobtrusive JavaScript

Jag ägnade de bästa åren av karriären åt att tillämpa Unobtrusive JavaScript.

Det är ett verktyg som för att uppnå två saker:

• Progressive enhancement. Börja med HTML. Använd JavaScript för att med hjälp av feature detection berika sektionen av HTML-dokumentet.
• Graceful degradation. Om agenten inte stödjer en feature, fungerar fortfarande det väsentliga (läs: inga kraschar, inga felmeddelanden, ingen teknisk exkludering).

Jag blev därför litet provocerad när denna artikel nämner detta som ett förlegat, dåligt sätt. De nämner detta exempel (ändrat av mig för att vara mer korrekt i tiden, men poängen kvarstår):

<script defer>
  const someForm = document.querySelectorAll("[data-thing-form]")
  // do stuff with the forms on the page
</script>

<form data-thing-form>
  ...
</form>

Poängen är dock helt korrekt.

The reason this is bad is because you are brute-forcing the execution of the code in an imperative way, rather than using a declarative technique to execute the code whenever the relevant tag shows up. First of all, you likely want this code living in a tree of JS files somewhere else, rather than in a script tag next to the form. You might want the code to apply to various sorts of forms, not just one form with a particular ~ID~ data attribute (min ändring). Plus this technique will completely break at any time you use reactivity or hypermedia: what if the form comes in via a fragment after the page has loaded? Will your code know that an ajax fragment has suddenly resulted in a DOM update?

De två alternativen är enastående. Det som går att använda redan idag är vad jag kommer att använda från och med nu.

<script defer>
  export class ThingFormElement extends HTMLElement {
    // do stuff with the forms on the page
  }
</script>

<thing-form>
  <form>
      ...
  </form>
</thing-form>

Elegant!

Jag lärde mig mig också att customElements.define retroaktivt initierar alla förekomster av elementet i dokumentet. Det går alltså att behålla defer, om det är viktigt.