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

deep dive into Material UI TextField built by mui

Image
The Material Design system is a design system used to create consistent digital experiences across platforms such as android, web and ios. Includes: a color system a typography system a shape system a grid system it addresses motion and lots more Also includes Material Theming which makes it easy to customize Material Design to match your brand. Material Design is not just a set of guidelines it is a whole ecosystem. Material itself stopped maintaining it's react implementation and recommends opensource versions.  A very popular open source implementation is  MUI ,  a react component library  built to implement Material Design . Bills itself as the "worlds most popular React UI framework" and at this time has 1.2M weekly downloads on npm and used by over 750k projects on github (did I mention it's very popular?).  Note: there are other react component libraries implementing bootstrap and ant design for example, so up to you and your design team on what you choose. 
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-router v6.4+ loaders, actions, forms and more

react-router  react-router is used for in app single page app navigation, we configure routes for pages in the app to map to components react-router has over 1bn downloads, its an industry standard (but there are others e.g. Nextjs router) many apps use react-router, many on v5.x the new react-router 6.4.x the newest major version of react router v6.4 is a significant enhancement which adds a lot of new features. react-router v6.4 offers new features to load data (loaders) and handle actions (actions).  It's done gone all Remix-y which makes sense because the same guys wrote both. eliminates a lot of boilerplate code to fetch data in useEffect() and set various loading states put your data load and update logic in react-route components instead of custom code unlike Remix, react-router v6.4 is still just all on the client (not server like Remix) paradigm shifts Lets start with a couple of high level ideas; "back to the future" so to speak OR "what's old is new ag
Read more