<tag-name> Browsers create ANY tag with at least one dash as a *Custom Element* They come in TWO flavours, and since they ARE HTMLElement, can be used for layout AND styling with CSS. The official names are: ► UNdefined…
One drawback. ► execute <script> at bottom of file ► execute <script defer> Both do the same; they execute script after DOM was parsed. When your JS creates GUI you now have to battle FOUCs. ► "import" loads your script…
<tag-name> are NOT unrecognized tags! I blogged about this: https://dashed-html.github.io ◄ <tagname> = always an HTMLUnknownElement until the WHATWG adds it as new Element. ◄ <tag-name> = (No JS!) UNDEFINED Custom…
this.querySelector will return nothing when you define this Web Component before (light)DOM is parsed, because the connectedCallback fires on the opening tag. Above code will only work when the Web Component is defined…
Microsoft SharePoint version 2007 and 2010 where all XSLT. Used in just about every serious Intranet 15...20 years ago. Developers deemed it too complex (or they were just stupid?) SharePoint 2013 went the CSR…
What the MDN documenation doesn't make clear, is the relationship between Inline Event Handlers and Event Handler Properties <div id="DIV" onclick="console.log(1)">CLICK!</div> <script> DIV.onclick = (evt) =>…
The article isn't complete/correct. Something did change with HTML. Since 2018 every browser interprets ANY <tag-name> with a dash as a valid HTMLElement, not HTMLUnknownElement. Absolutly NO JavaScript required to turn…
Latest blogpost on that site is from 2018 I presume Web Components are so great they haven't had anything happen since 2018
> there are no weird rendering glitches or timing issues or weird gotchas that you have to dig into to. Ehm... define the Web Component render blocking in the head, because you want to prevent FOUCs. Then try to access…
>> On the positive side their use of web components is a nice bet. Web Components are a JavaScript/ECMAscript standard. So this is like saying: _Their use of Arrays is a nice bet_
Note: Everyone uses Web Components. WTF?! Why does the <VIDEO> tag has a shadowRoot??? Browser Vendors have been using Web Component technology for INPUT, TEXTAREA, VIDEO and the like, for many many many moons now.
I would go all-in. Web Components is not (just) about technology, but about 4 companies working together on setting a standard. Companies that used to fight in the Browser Wars now work together on the standard. They…
FYI: adoptedStyleSheets: https://developer.mozilla.org/en-US/docs/Web/API/Document/ad...
for over 10 years now Apple has stated it won't implement Customized Built In Elements ( "is" extends ) If you want to dive in deep: https://stackoverflow.com/search?q=liskov Here is Apple debating all non Liskov…
Only when you really want to encapsulate style or ensure GUI. This should/could be part of a generic <app-footer) Web Component which ensures all that required is required. We use a single <app-footer> for over 15…
There are some issues with this code: https://gist.github.com/ceving/6e65886e04563ed9e6e42cc5f8d3f...
document.body.onclick=()=>"document.location='www.google.com'";
https://webcomponents.dev/blog/all-the-ways-to-make-a-web-co... Yet, they are all Tools, and you don't learn a Technology by learning a Tool, or do you become a Writer when you learn Word? ``::part`` is part [sic] of…
why waste 28 minutes writing your own component? copy/paste takes 2 minutes https://dev.to/dannyengelman/load-file-web-component-add-ext...
React supports Web Components, just some quirks to be aware of: https://custom-elements-everywhere.com/
If Lit is equivalent to Svelte, then BASIC was equivalent to COBOL
Unless you are still in the IE world (which is challenging when using WCs), use one `append` instead of multiple `appendChild`
use: slotAssignment: 'manual'
<textarea> <input> <video> ARE all Web Components, and have been for many moons so Browser vendors could implement their own UI. So everyone using a Browser *IS* using Web Components. It just took some years for the…
To make that a fair comparison Andrew his native code should be refactored to: https://jsfiddle.net/WebComponents/ovtc5wpx/ customElements.define('like-button', class extends HTMLElement { static get…
<tag-name> Browsers create ANY tag with at least one dash as a *Custom Element* They come in TWO flavours, and since they ARE HTMLElement, can be used for layout AND styling with CSS. The official names are: ► UNdefined…
One drawback. ► execute <script> at bottom of file ► execute <script defer> Both do the same; they execute script after DOM was parsed. When your JS creates GUI you now have to battle FOUCs. ► "import" loads your script…
<tag-name> are NOT unrecognized tags! I blogged about this: https://dashed-html.github.io ◄ <tagname> = always an HTMLUnknownElement until the WHATWG adds it as new Element. ◄ <tag-name> = (No JS!) UNDEFINED Custom…
this.querySelector will return nothing when you define this Web Component before (light)DOM is parsed, because the connectedCallback fires on the opening tag. Above code will only work when the Web Component is defined…
Microsoft SharePoint version 2007 and 2010 where all XSLT. Used in just about every serious Intranet 15...20 years ago. Developers deemed it too complex (or they were just stupid?) SharePoint 2013 went the CSR…
What the MDN documenation doesn't make clear, is the relationship between Inline Event Handlers and Event Handler Properties <div id="DIV" onclick="console.log(1)">CLICK!</div> <script> DIV.onclick = (evt) =>…
The article isn't complete/correct. Something did change with HTML. Since 2018 every browser interprets ANY <tag-name> with a dash as a valid HTMLElement, not HTMLUnknownElement. Absolutly NO JavaScript required to turn…
Latest blogpost on that site is from 2018 I presume Web Components are so great they haven't had anything happen since 2018
> there are no weird rendering glitches or timing issues or weird gotchas that you have to dig into to. Ehm... define the Web Component render blocking in the head, because you want to prevent FOUCs. Then try to access…
>> On the positive side their use of web components is a nice bet. Web Components are a JavaScript/ECMAscript standard. So this is like saying: _Their use of Arrays is a nice bet_
Note: Everyone uses Web Components. WTF?! Why does the <VIDEO> tag has a shadowRoot??? Browser Vendors have been using Web Component technology for INPUT, TEXTAREA, VIDEO and the like, for many many many moons now.
I would go all-in. Web Components is not (just) about technology, but about 4 companies working together on setting a standard. Companies that used to fight in the Browser Wars now work together on the standard. They…
FYI: adoptedStyleSheets: https://developer.mozilla.org/en-US/docs/Web/API/Document/ad...
for over 10 years now Apple has stated it won't implement Customized Built In Elements ( "is" extends ) If you want to dive in deep: https://stackoverflow.com/search?q=liskov Here is Apple debating all non Liskov…
Only when you really want to encapsulate style or ensure GUI. This should/could be part of a generic <app-footer) Web Component which ensures all that required is required. We use a single <app-footer> for over 15…
There are some issues with this code: https://gist.github.com/ceving/6e65886e04563ed9e6e42cc5f8d3f...
document.body.onclick=()=>"document.location='www.google.com'";
https://webcomponents.dev/blog/all-the-ways-to-make-a-web-co... Yet, they are all Tools, and you don't learn a Technology by learning a Tool, or do you become a Writer when you learn Word? ``::part`` is part [sic] of…
why waste 28 minutes writing your own component? copy/paste takes 2 minutes https://dev.to/dannyengelman/load-file-web-component-add-ext...
React supports Web Components, just some quirks to be aware of: https://custom-elements-everywhere.com/
If Lit is equivalent to Svelte, then BASIC was equivalent to COBOL
Unless you are still in the IE world (which is challenging when using WCs), use one `append` instead of multiple `appendChild`
use: slotAssignment: 'manual'
<textarea> <input> <video> ARE all Web Components, and have been for many moons so Browser vendors could implement their own UI. So everyone using a Browser *IS* using Web Components. It just took some years for the…
To make that a fair comparison Andrew his native code should be refactored to: https://jsfiddle.net/WebComponents/ovtc5wpx/ customElements.define('like-button', class extends HTMLElement { static get…