Component

From BC$ MobileTV Wiki
(Redirected from WebComponents)
Jump to: navigation, search
WebComponents logo

WebComponents are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.

WebComponents are based on existing web standards. Features to support web components are currently being added to the HTML and DOM specs, letting web developers easily extend HTML with new elements with encapsulated styling and custom behavior.


Specifications


Custom Elements

[1] [2]


Shadow DOM

[4]


Templates


CSS modules

[5] [6] [7] [8]

EXAMPLES


Design Systems

[10] [11] [12] [13] [14]

"Living" Style Guides

[15] [16] [17] [18]


Component Catalogs

[19] [20] [21] [22]



Tools

Libraries

[28] [29] [30]

Design Systems

[31]


Resources


Tutorials

[34] [35] [36]

[37] [38] [39] [40] [41] [42] [43] [44]


External Links

[53] [54] [55] [56] [57]


References

  1. ↑ The Case for Custom Elements -- Part 1: https://medium.com/dev-channel/the-case-for-custom-elements-part-1-65d807b4b439
  2. ↑ The Case for Custom Elements -- Part 2: https://medium.com/dev-channel/the-case-for-custom-elements-part-2-2efe42ce9133
  3. ↑ Shadow DOM polyfill: https://www.webcomponents.org/polyfills/shadow-dom/
  4. ↑ Shadow DOM CSS Cheat Sheet: https://web.archive.org/web/20141205183548/https://robdodson.me/blog/2014/04/10/shadow-dom-css-cheat-sheet/
  5. ↑ An Introduction to CSS-in-JS -- Examples, Pros & Cons: https://webdesign.tutsplus.com/articles/an-introduction-to-css-in-js-examples-pros-and-cons--cms-33574
  6. ↑ "Styled Components" project: https://styled-components.com/ | DOCS | SRC (React/web & ReactNative/mobile styling framework)
  7. ↑ Aphrodite framework: https://github.com/Khan/aphrodite(framework-agnostic "CSS-in-JS" with support for server-side rendering, browser prefixing, and minimum CSS generation)
  8. ↑ Inline CSS at Khan Academy - Aphrodite: https://blog.khanacademy.org/inline-css-at-khan-academy-aphrodite/
  9. ↑ Okta launches its new open-source design system with a focus on accessibility: https://techcrunch.com/2021/02/04/okta-launches-its-new-open-source-design-system-with-a-focus-on-accessibility/?guccounter=1
  10. ↑ The State of Design Systems (2020): https://material.io/blog/research-state-of-design-systems-2020
  11. ↑ Avoiding the Pitfalls of "Nested Components" in a Design System: https://css-tricks.com/nested-components-in-a-design-system/
  12. ↑ The Era of Design Systems Is Gone: https://onchky.medium.com/the-era-of-design-systems-is-gone-f61f97cd8e86
  13. ↑ Documentation—the Key to a Successful Design System: https://xd.adobe.com/ideas/principles/design-systems/documentation-key-to-successful-design-system/
  14. ↑ Design Systems: https://xd.adobe.com/ideas/principles/design-systems/
  15. ↑ A Maintainable Style Guide: http://engineering.lonelyplanet.com/2014/05/18/a-maintainable-styleguide.html
  16. ↑ CSS specificity -- main things you should know: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
  17. ↑ CSS Specificity for "poker" players: https://carl.camera/?id=95
  18. ↑ Specificity Calculator: https://specificity.keegan.st
  19. ↑ Salesforce "trailhead" - Build Lightning Web Components (E-learning module): https://trailhead.salesforce.com/en/content/learn/trails/build-lightning-web-components
  20. ↑ Salesforce -- LWC "Design System" - Date Picker example: https://www.lightningdesignsystem.com/components/datepickers/
  21. ↑ Salesforce -- Developer Quick Takes - explaining the "Shadow DOM": https://www.youtube.com/watch?v=K5i9zMzVlzM
  22. ↑ Salesforce -- Developer Quick Takes - Custom Elements & HTML Templates: https://www.youtube.com/watch?v=6rK3AyxE-54
  23. ↑ What is the Polymer project: (Google's OSS reference implementation of WebComponents)
  24. ↑ Ionic -- App Showcase (major applications developed in Ionic): https://showcase.ionicframework.com/apps/top
  25. ↑ Ionic 4 tutorial -- Mastering Web Components in Ionic 4: https://ionicthemes.com/tutorials/about/ionic-4-tutorial-mastering-web-components-in-ionic-4
  26. ↑ ExtWebComponents - Early Access is Now Available: https://www.sencha.com/blog/extwebcomponents-early-access-is-now-available/
  27. ↑ Sencha Roadmap Update – September 2019: https://www.sencha.com/blog/sencha-roadmap-update-2019/ (ExtJS-WebComponents the path forward for Sencha)
  28. ↑ 9 Web Components UI Libraries You Should Know in 2019: https://blog.bitsrc.io/9-web-component-ui-libraries-you-should-know-in-2019-9d4476c3f103
  29. ↑ 7 Tools for Developing Web Components in 2019: https://dev.to/giteden/7-tools-for-developing-web-components-in-2019-1ld6
  30. ↑ My first Svelte component on NPM — and why it’s a big deal: https://medium.com/@u_glow/my-first-svelte-component-on-npm-and-why-its-a-big-deal-c4568f52de97
  31. ↑ Applitools - Roadmap to Testing a Design System – by Marie Drake (WEBINAR): https://applitools.com/blog/roadmap-testing-design-system/
  32. ↑ Polyfills and Transpilation for Your Custom Elements: https://alligator.io/web-components/polyfills-transpilation/
  33. ↑ Should you build a reusable “Component Library”?: https://mcapoz.medium.com/should-you-build-a-reusable-component-library-4e7df72413d7
  34. ↑ Complementarity of React and Web Components: https://www.webcomponents.org/community/presentations/complementarity-of-react-and-web-components-at-reactjs-conf
  35. ↑ How to Build Faster with Reusable UI Components in React: https://codeburst.io/how-to-build-faster-with-reusable-ui-components-in-react-482397dec818 (an overview from a co-founder of "Bit" component catalog)
  36. ↑ How to Achieve Reusability with React Components: https://medium.com/walmartglobaltech/how-to-achieve-reusability-with-react-components-81edeb7fb0e0
  37. ↑ Integrate Web Components with Your Vue.js App: https://alligator.io/vuejs/vue-integrate-web-components/
  38. ↑ How to use Web Components in Vue: https://vaadin.com/learn/tutorials/using-web-components-in-vue
  39. ↑ Vue.js -- Single File Components: https://vuejs.org/v2/guide/single-file-components.html
  40. ↑ vue.js components - WebComponents wrapper: https://github.com/vuejs/vue-web-component-wrapper
  41. ↑ Create Web Components with Vue.js: https://dev.to/aumayeung/create-web-components-with-vue-js-2bb0
  42. ↑ Agile Design Systems in Vue: https://www.vuemastery.com/conferences/vueconf-2018/agile-design-systems-in-vue-miriam-suzanne
  43. ↑ Custom Elements support: https://vuegwt.github.io/vue-gwt/guide/advanced/custom-elements.html
  44. ↑ Composing with Components: https://v3.vuejs.org/guide/introduction.html#composing-with-components
  45. ↑ Distributed Event-based Communication for Web Components: https://www.researchgate.net/publication/305208920_Distributed_Event-based_Communication_for_Web_Components | DEMO
  46. ↑ WebComponents in PROD: https://news.ycombinator.com/item?id=17297065
  47. ↑ Lightning Inter-Component Communication Patterns: https://developer.salesforce.com/blogs/developer-relations/2017/04/lightning-inter-component-communication-patterns.html
  48. ↑ Inter-Component Communication with Aurelia: https://sean-hunter.io/2016/10/23/inter-component-communication-with-aurelia/
  49. ↑ Making Web Components Work: https://engineering.mixpanel.com/2018/06/12/making-web-components-work/
  50. ↑ How to communicate between Web Components (native UI)?: https://stackoverflow.com/questions/55001211/how-to-communicate-between-web-components-native-ui
  51. ↑ Five reasons why Web Components could complement JavaScript frameworks: https://medium.com/javascript-in-plain-english/could-web-components-actually-compliment-javascript-frameworks-5-reasons-why-i-think-so-971eee82ee85
  52. ↑ How to communicate between Components: https://www.freecodecamp.org/news/how-to-communicate-between-components-b48ef70bf913/
  53. ↑ Try a legacy Web Components 1.0 example: http://jsbin.com/roripoveku/edit?html,output
  54. ↑ Comprehensive set of high-quality web components for common user interface patterns: https://github.com/basic-web-components/basic-web-components
  55. ↑ OC components examples, covering the most common use cases: https://github.com/opencomponents/oc-components-examples
  56. ↑ OpenTable - Open Components: https://github.com/opentable/oc
  57. ↑ Open components as microservices in the front-end world: https://conferences.oreilly.com/velocity/devops-web-performance-eu-2015/public/schedule/detail/44289
  58. ↑ Writing a hello world WebComponent: https://apimeister.com/2017/06/03/writing-a-hello-world-web-component.html

See Also

Widgets | RIA | SPA | AEM | HTML/CSS/JS | HTML5#WebComponents | Web | Design | A11Y

Retrieved from "http://wiki.bcmoney-mobiletv.com/index.php?title=Component&oldid=60055#WebComponents"