A place to cache linked articles (think custom and personal wayback machine)
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.

index.html 19KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the `title` element
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Understanding Kristofer Joseph's Single File Web Component (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="https://til.simonwillison.net/web-components/understanding-single-file-web-component">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>Understanding Kristofer Joseph's Single File Web Component</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://til.simonwillison.net/web-components/understanding-single-file-web-component" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <p><a href="https://twitter.com/brianleroux/status/1453472609518034944" rel="nofollow">Via Brian LeRoux</a> I found <a href="https://gist.github.com/kristoferjoseph/c4e47389ae0f0447db175b914e471628">single-file-web-component.html</a> by Kristofer Joseph. It's really clever! It demonstrates how to build a <code>&lt;hello-world&gt;&lt;/hello-world&gt;</code> custom Web Component in a single HTML file, using some neat tricks.</p>
  71. <p>For my own education I spent some time picking it apart and built my own annotated version of the code showing what I learned.</p>
  72. <p>Justin Fagnani <a href="https://twitter.com/justinfagnani/status/1453531485240102916" rel="nofollow">provided useful feedback</a> on this on Twitter.</p>
  73. <div class="highlight highlight-text-html-basic"><pre><span class="pl-c1">&lt;!DOCTYPE html<span class="pl-kos">&gt;</span></span>
  74. <span class="pl-kos">&lt;</span><span class="pl-ent">html</span> <span class="pl-c1">lang</span>="<span class="pl-s">en</span>"<span class="pl-kos">&gt;</span>
  75. <span class="pl-kos">&lt;</span><span class="pl-ent">head</span><span class="pl-kos">&gt;</span>
  76. <span class="pl-kos">&lt;</span><span class="pl-ent">meta</span> <span class="pl-c1">charset</span>="<span class="pl-s">UTF-8</span>" /&gt;
  77. <span class="pl-kos">&lt;</span><span class="pl-ent">title</span><span class="pl-kos">&gt;</span>Single File Web Component<span class="pl-kos">&lt;/</span><span class="pl-ent">title</span><span class="pl-kos">&gt;</span>
  78. <span class="pl-kos">&lt;</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
  79. <span class="pl-ent">body</span> {
  80. <span class="pl-c1">background-color</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>eee</span>;
  81. <span class="pl-c1">font-family</span><span class="pl-kos">:</span> Helvetica<span class="pl-kos">,</span> sans-serif;
  82. }
  83. <span class="pl-ent">h1</span> {
  84. <span class="pl-c1">color</span><span class="pl-kos">:</span> blue;
  85. <span class="pl-c1">background-color</span><span class="pl-kos">:</span> pink;
  86. }
  87. <span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
  88. <span class="pl-kos">&lt;/</span><span class="pl-ent">head</span><span class="pl-kos">&gt;</span>
  89. <span class="pl-kos">&lt;</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span>
  90. <span class="pl-kos">&lt;</span><span class="pl-ent">template</span> <span class="pl-c1">id</span>="<span class="pl-s">single-file</span>"<span class="pl-kos">&gt;</span>
  91. <span class="pl-kos">&lt;</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
  92. <span class="pl-c">/*</span>
  93. <span class="pl-c"> These styles affect only content inside the shadow DOM.</span>
  94. <span class="pl-c"></span>
  95. <span class="pl-c"> Styles in the outside document mostly do not affect stuff</span>
  96. <span class="pl-c"> here, but there are some exceptions: font-family affects</span>
  97. <span class="pl-c"> this &lt;h1&gt; for example. I don't understand the rules here.</span>
  98. <span class="pl-c"> */</span>
  99. <span class="pl-ent">h1</span> {
  100. <span class="pl-c1">color</span><span class="pl-kos">:</span> red;
  101. }
  102. <span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
  103. <span class="pl-kos">&lt;</span><span class="pl-ent">h1</span><span class="pl-kos">&gt;</span>Hello world (web component)<span class="pl-kos">&lt;/</span><span class="pl-ent">h1</span><span class="pl-kos">&gt;</span>
  104. <span class="pl-c">&lt;!--</span>
  105. <span class="pl-c"> This code still works if you remove the type="module" parameter.</span>
  106. <span class="pl-c"></span>
  107. <span class="pl-c"> Using that parameter enables features such as 'import ... from'</span>
  108. <span class="pl-c"></span>
  109. <span class="pl-c"> More importantly it stops variables inside the script tag from</span>
  110. <span class="pl-c"> leaking out to the global scope - if you remove type="module"</span>
  111. <span class="pl-c"> from here then the HelloWorld class becomes visible.</span>
  112. <span class="pl-c"> --&gt;</span>
  113. <span class="pl-kos">&lt;</span><span class="pl-ent">script</span> <span class="pl-c1">type</span>="<span class="pl-s">module</span>"<span class="pl-kos">&gt;</span>
  114. <span class="pl-k">class</span> <span class="pl-v">HelloWorld</span> <span class="pl-k">extends</span> <span class="pl-v">HTMLElement</span> <span class="pl-kos">{</span>
  115. <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  116. <span class="pl-c">/*</span>
  117. <span class="pl-c"> If you remove the call to super() here Firefox shows an error:</span>
  118. <span class="pl-c"> "Uncaught ReferenceError: must call super constructor before</span>
  119. <span class="pl-c"> using 'this' in derived class constructor'"</span>
  120. <span class="pl-c"> */</span>
  121. <span class="pl-smi">super</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  122. <span class="pl-k">const</span> <span class="pl-s1">template</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">"single-file"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  123. <span class="pl-c">/*</span>
  124. <span class="pl-c"> mode: 'open' means you are allowed to access</span>
  125. <span class="pl-c"> document.querySelector('hello-world').shadowRoot to get</span>
  126. <span class="pl-c"> at the DOM inside. Set to 'closed' and the .shadowRoot</span>
  127. <span class="pl-c"> property will return null.</span>
  128. <span class="pl-c"> */</span>
  129. <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">attachShadow</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">mode</span>: <span class="pl-s">"open"</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">appendChild</span><span class="pl-kos">(</span>
  130. <span class="pl-s1">template</span><span class="pl-kos">.</span><span class="pl-c1">content</span><span class="pl-kos">.</span><span class="pl-en">cloneNode</span><span class="pl-kos">(</span><span class="pl-c1">true</span><span class="pl-kos">)</span>
  131. <span class="pl-kos">)</span><span class="pl-kos">;</span>
  132. <span class="pl-c">/* </span>
  133. <span class="pl-c"> template.content is a 'DocumentFragment' array.</span>
  134. <span class="pl-c"></span>
  135. <span class="pl-c"> template.content.cloneNode() without the true performs</span>
  136. <span class="pl-c"> a shallow clone, which provides a empty DocumentFragment</span>
  137. <span class="pl-c"> array.</span>
  138. <span class="pl-c"></span>
  139. <span class="pl-c"> template.content.cloneNode(true) provides one with 6 items</span>
  140. <span class="pl-c"> */</span>
  141. <span class="pl-kos">}</span>
  142. <span class="pl-en">connectedCallback</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  143. <span class="pl-c">// https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks</span>
  144. <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"Why hello there 👋"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  145. <span class="pl-kos">}</span>
  146. <span class="pl-kos">}</span>
  147. <span class="pl-s1">customElements</span><span class="pl-kos">.</span><span class="pl-en">define</span><span class="pl-kos">(</span><span class="pl-s">"hello-world"</span><span class="pl-kos">,</span> <span class="pl-v">HelloWorld</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  148. <span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
  149. <span class="pl-kos">&lt;/</span><span class="pl-ent">template</span><span class="pl-kos">&gt;</span>
  150. <span class="pl-kos">&lt;</span><span class="pl-ent">h1</span><span class="pl-kos">&gt;</span>This is not a web component<span class="pl-kos">&lt;/</span><span class="pl-ent">h1</span><span class="pl-kos">&gt;</span>
  151. <span class="pl-kos">&lt;</span><span class="pl-ent">hello-world</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">hello-world</span><span class="pl-kos">&gt;</span>
  152. <span class="pl-kos">&lt;</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
  153. <span class="pl-k">const</span> <span class="pl-s1">sf</span> <span class="pl-c1">=</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">"single-file"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  154. <span class="pl-c">/*</span>
  155. <span class="pl-c"> Before executing this line, sf.content.lastElementChild</span>
  156. <span class="pl-c"> is the &lt;script type="module"&gt; element hidden away inside</span>
  157. <span class="pl-c"> the &lt;template&gt; - we remove it from the template here and</span>
  158. <span class="pl-c"> append it to the document.body, causing it to execute in</span>
  159. <span class="pl-c"> the main document and activate the &lt;hello-world&gt; tag.</span>
  160. <span class="pl-c"> */</span>
  161. <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-c1">body</span><span class="pl-kos">.</span><span class="pl-en">appendChild</span><span class="pl-kos">(</span><span class="pl-s1">sf</span><span class="pl-kos">.</span><span class="pl-c1">content</span><span class="pl-kos">.</span><span class="pl-c1">lastElementChild</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  162. <span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
  163. <span class="pl-kos">&lt;/</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span>
  164. <span class="pl-kos">&lt;/</span><span class="pl-ent">html</span><span class="pl-kos">&gt;</span></pre></div>
  165. <p class="created">Created 2021-10-27T17:33:08-07:00, updated 2021-10-27T19:48:23-07:00 · <a href="https://github.com/simonw/til/commits/main/web-components/understanding-single-file-web-component.md">History</a> · <a href="https://github.com/simonw/til/blob/main/web-components/understanding-single-file-web-component.md">Edit</a></p>
  166. </article>
  167. <hr>
  168. <footer>
  169. <p>
  170. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  171. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
  172. </svg> Accueil</a> •
  173. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  174. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
  175. </svg> Suivre</a> •
  176. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  177. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-user-tie"></use>
  178. </svg> Pro</a> •
  179. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  180. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
  181. </svg> Email</a> •
  182. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  183. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-hammer2"></use>
  184. </svg> Légal</abbr>
  185. </p>
  186. <template id="theme-selector">
  187. <form>
  188. <fieldset>
  189. <legend><svg class="icon icon-brightness-contrast">
  190. <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-brightness-contrast"></use>
  191. </svg> Thème</legend>
  192. <label>
  193. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  194. </label>
  195. <label>
  196. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  197. </label>
  198. <label>
  199. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  200. </label>
  201. </fieldset>
  202. </form>
  203. </template>
  204. </footer>
  205. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  206. <script>
  207. function loadThemeForm(templateName) {
  208. const themeSelectorTemplate = document.querySelector(templateName)
  209. const form = themeSelectorTemplate.content.firstElementChild
  210. themeSelectorTemplate.replaceWith(form)
  211. form.addEventListener('change', (e) => {
  212. const chosenColorScheme = e.target.value
  213. localStorage.setItem('theme', chosenColorScheme)
  214. toggleTheme(chosenColorScheme)
  215. })
  216. const selectedTheme = localStorage.getItem('theme')
  217. if (selectedTheme && selectedTheme !== 'undefined') {
  218. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  219. }
  220. }
  221. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  222. window.addEventListener('load', () => {
  223. let hasDarkRules = false
  224. for (const styleSheet of Array.from(document.styleSheets)) {
  225. let mediaRules = []
  226. for (const cssRule of styleSheet.cssRules) {
  227. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  228. continue
  229. }
  230. // WARNING: Safari does not have/supports `conditionText`.
  231. if (cssRule.conditionText) {
  232. if (cssRule.conditionText !== prefersColorSchemeDark) {
  233. continue
  234. }
  235. } else {
  236. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  237. continue
  238. }
  239. }
  240. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  241. }
  242. // WARNING: do not try to insert a Rule to a styleSheet you are
  243. // currently iterating on, otherwise the browser will be stuck
  244. // in a infinite loop…
  245. for (const mediaRule of mediaRules) {
  246. styleSheet.insertRule(mediaRule.cssText)
  247. hasDarkRules = true
  248. }
  249. }
  250. if (hasDarkRules) {
  251. loadThemeForm('#theme-selector')
  252. }
  253. })
  254. </script>
  255. </body>
  256. </html>