web components and how we used

Web components

"Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps." - MDN

3 main technologies

  • Custom elements:  define behavior of the component 
  • Shadow DOM:      a shadow dom is rendered separately from the main document dom, and thus isolated
    • you can create a custom element with a shadow dom 
  • HTLM Templates   write markup templates

steps to build your own web component

write the class

  1. create a js class for your element which inherits from HTMLElement
    • define a constructor with call to super()
  2. register it with the CustomElementRegistry object e.g.  customElements.define("word-count", WordCount, { extends: "p" });
    • the extends is optional, but shows you can extend from existing elements and use like so: <p is="word-count">
    • terminology update: when extending it called "Custom built in"

add behavior by adding lifecycle methods to your class

  1. connectedCallback() - called each time is appended into a document-connected element
    1. typically the place to add render behavior
    2. this is where to code dom apis
    3. attach to shadowRoot using: 
      1. shadow.innerHTML = `<p>hi<p>`;
      2. or: shadow.append(htmlFragment)
  2. disconnectedCallback() - called when disconnected form documents DOM
  3. observedAttributes() - used to specify list of attributes to watch
    1. for react folks think props
  4. attributeChangedCallback() - called when when one of the custom element's attributes is added, removed, or changed
    1. notice you get the name as well as old and new values attributeChangedCallback(name, oldValue, newValue) 

add styles

You can attach styles inline or as a link element to the shadowRoot

To attach styles inline

  • document.createElement("style");
  • style.textContent = `.my-class { }`;
  • shadow.append(syle, htmlFragment)

To attach styles as linked file

  • link: document.createElement("link"); 
  • shadow.appendChild(linkElem);


libraries to make this easier

Lit     - https://lit.dev/

Stencil - https://stenciljs.com/


Here's a gist example use of web components to render html from another source in a shadow dom.


helpful resources

https://developer.mozilla.org/en-US/docs/Web/Web_Components

https://www.youtube.com/watch?v=vLkPBj9ZaU0

https://css-tricks.com/building-interoperable-web-components-react/

shadow dom: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

https://bradfrost.com/blog/post/lets-talk-about-web-components/?ck_subscriber_id=1697731036

Comments

Post a Comment

Popular posts from this blog

My Reading Lists

I had some time over Christmas and decided to organize my reading lists. Interesting how some time away from daily work allows one to raise up your head   Uncle Bob on Principles of OOd See also book: Agile Principles, Patterns, and Practices in C# Available on Safari Books online. Algorithms in a Nutshell Nine   Algorithms   That Changed   the Future Programming Pearls book: http://www.cs.bell-labs.com/cm/cs/pearls/toc.html 97 Things Every Programmer Should Know Seven L a nguages http://pragprog.com/book/btlang/seven-languages-in-seven-weeks Codys book : http://www.domenlightenment.com/ Principles of OO programming: http://www.nczonline.net/blog/2012/12/18/now-available-principles-of-object-oriented-programming-in-javascript-beta/ Object Oriented programming with Stefan Stoy... Chrome V8 : http://code.google.com/p/v8/ https://developers.google.com/v8/ https://developers.google.com/v8/design - read this Mozilla Javascript page ...
Read more

angular js protractor e2e cheatsheet

Many from the protractor test suite category detailed task syntax example load page load a page browser.get('yoururl') browser btn actions browser back/forward browser.navigate().back() OR browser.navigate().forward() access elements on page See Protractor API list and examples from Protractors test suite access by angular ngmodel name (must match ngmodel in the html) this is the preferred approach element(by.model('person.name')); access by the css id on the page e.g, #user_name (but this can be brittle) element(by.id('user_name')) access angular binding to get generated value i.e. for {{}} element(by.binding('person.concatName')); access angular repeat list data (must match repeat stmt in the html) See Protractor test suit l...
Read more

react-select stacking order bug, z-index, layers and stacking

Image
Had to fix a tricky bug related to react-select recently (our Dropdown component wraps react-select). Here's the how the bug manifested. Dropdown does not overlay dynamically added content below it Variations of this have been reported since 2017. But I tried all the suggestions in the comments and none worked for me. I also tried wrapping the Dropdown in a div and changing z-index to be higher as well as making absolute position but no success. Changing the elements order in the html source and then reordering using flexbox order does work but it breaks the tabbing flow and is not recommended from an accessibility standpoint. One issue is the Dropdown is in a container and is constrained by the containers z-index. No matter how I change the Dropdowns z-index, its container is stacked below the next in stacking order. Google Chrome debugger layers tool provides a cool way to visualize layers. Could be better but helps, check it out below. You have to look closely but you can see h...
Read more