davidbgk
/
larlet-fr-david-cache
Bevaka 1
Stjärnmärk 0
Förgrening 0
Kod Släpp 0 Aktiviteter
A place to cache linked articles (think custom and personal wayback machine)
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
230 Incheckningar
1 Gren
Träd: 9d1ae5a4c6
Grenar Taggar
${ item.name }
Skapa branchen ${ searchTerm }
från '9d1ae5a4c6'
${ noResults }
larlet-fr-david-cache/cache/2021/8016f83f512107dd26e5780b08e.../index.md

index.md 11KB
Rå Normal View Historik

More links
3 år sedan
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106 
  1. title: Understanding Kristofer Joseph's Single File Web Component

  2. url: https://til.simonwillison.net/web-components/understanding-single-file-web-component

  3. hash_url: 8016f83f512107dd26e5780b08ea7305

  4. 

  5. <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>

  6. <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>

  7. <p>Justin Fagnani <a href="https://twitter.com/justinfagnani/status/1453531485240102916" rel="nofollow">provided useful feedback</a> on this on Twitter.</p>

  8. <div class="highlight highlight-text-html-basic"><pre><span class="pl-c1">&lt;!DOCTYPE html<span class="pl-kos">&gt;</span></span>

  9. <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>

  10.   <span class="pl-kos">&lt;</span><span class="pl-ent">head</span><span class="pl-kos">&gt;</span>

  11.     <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;

  12.     <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>

  13.     <span class="pl-kos">&lt;</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>

  14.       <span class="pl-ent">body</span> {

  15.         <span class="pl-c1">background-color</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>eee</span>;

  16.         <span class="pl-c1">font-family</span><span class="pl-kos">:</span> Helvetica<span class="pl-kos">,</span> sans-serif;

  17.       }

  18.       <span class="pl-ent">h1</span> {

  19.         <span class="pl-c1">color</span><span class="pl-kos">:</span> blue;

  20.         <span class="pl-c1">background-color</span><span class="pl-kos">:</span> pink;

  21.       }

  22.     <span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>

  23.   <span class="pl-kos">&lt;/</span><span class="pl-ent">head</span><span class="pl-kos">&gt;</span>

  24.   <span class="pl-kos">&lt;</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span>

  25.     <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>

  26.       <span class="pl-kos">&lt;</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>

  27.         <span class="pl-c">/*</span>

  28. <span class="pl-c">          These styles affect only content inside the shadow DOM.</span>

  29. <span class="pl-c"></span>

  30. <span class="pl-c">          Styles in the outside document mostly do not affect stuff</span>

  31. <span class="pl-c">          here, but there are some exceptions: font-family affects</span>

  32. <span class="pl-c">          this &lt;h1&gt; for example. I don't understand the rules here.</span>

  33. <span class="pl-c">        */</span>

  34.         <span class="pl-ent">h1</span> {

  35.           <span class="pl-c1">color</span><span class="pl-kos">:</span> red;

  36.         }

  37.       <span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>

  38. 

  39.       <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>

  40.       <span class="pl-c">&lt;!--</span>

  41. <span class="pl-c">      This code still works if you remove the type="module" parameter.</span>

  42. <span class="pl-c"></span>

  43. <span class="pl-c">      Using that parameter enables features such as 'import ... from'</span>

  44. <span class="pl-c"></span>

  45. <span class="pl-c">      More importantly it stops variables inside the script tag from</span>

  46. <span class="pl-c">      leaking out to the global scope - if you remove type="module"</span>

  47. <span class="pl-c">      from here then the HelloWorld class becomes visible.</span>

  48. <span class="pl-c">      --&gt;</span>

  49.       <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>

  50.         <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>

  51.           <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>

  52.             <span class="pl-c">/*</span>

  53. <span class="pl-c">              If you remove the call to super() here Firefox shows an error:</span>

  54. <span class="pl-c">              "Uncaught ReferenceError: must call super constructor before</span>

  55. <span class="pl-c">              using 'this' in derived class constructor'"</span>

  56. <span class="pl-c">            */</span>

  57.             <span class="pl-smi">super</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  58.             <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>

  59.             <span class="pl-c">/*</span>

  60. <span class="pl-c">              mode: 'open' means you are allowed to access</span>

  61. <span class="pl-c">              document.querySelector('hello-world').shadowRoot to get</span>

  62. <span class="pl-c">              at the DOM inside. Set to 'closed' and the .shadowRoot</span>

  63. <span class="pl-c">              property will return null.</span>

  64. <span class="pl-c">            */</span>

  65.             <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>

  66.               <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>

  67.             <span class="pl-kos">)</span><span class="pl-kos">;</span>

  68.             <span class="pl-c">/* </span>

  69. <span class="pl-c">              template.content is a 'DocumentFragment' array.</span>

  70. <span class="pl-c"></span>

  71. <span class="pl-c">              template.content.cloneNode() without the true performs</span>

  72. <span class="pl-c">              a shallow clone, which provides a empty DocumentFragment</span>

  73. <span class="pl-c">              array.</span>

  74. <span class="pl-c"></span>

  75. <span class="pl-c">              template.content.cloneNode(true) provides one with 6 items</span>

  76. <span class="pl-c">            */</span>

  77.           <span class="pl-kos">}</span>

  78.           <span class="pl-en">connectedCallback</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>

  79.             <span class="pl-c">// https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#using_the_lifecycle_callbacks</span>

  80.             <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>

  81.           <span class="pl-kos">}</span>

  82.         <span class="pl-kos">}</span>

  83.         <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>

  84.       <span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>

  85.     <span class="pl-kos">&lt;/</span><span class="pl-ent">template</span><span class="pl-kos">&gt;</span>

  86. 

  87.     <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>

  88. 

  89.     <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>

  90. 

  91.     <span class="pl-kos">&lt;</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>

  92.       <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>

  93.       <span class="pl-c">/*</span>

  94. <span class="pl-c">        Before executing this line, sf.content.lastElementChild</span>

  95. <span class="pl-c">        is the &lt;script type="module"&gt; element hidden away inside</span>

  96. <span class="pl-c">        the &lt;template&gt; - we remove it from the template here and</span>

  97. <span class="pl-c">        append it to the document.body, causing it to execute in</span>

  98. <span class="pl-c">        the main document and activate the &lt;hello-world&gt; tag.</span>

  99. <span class="pl-c">      */</span>

  100.       <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>

  101.     <span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>

  102.   <span class="pl-kos">&lt;/</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span>

  103. <span class="pl-kos">&lt;/</span><span class="pl-ent">html</span><span class="pl-kos">&gt;</span></pre></div>

  104. 

  105. 

  106. <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>