You have a beautiful design system that delivers consistent, on-brand user experiences! Now, how do your designers and engineers provide your design to teams using any framework from React, to Vue, to Angular, and more?
The Material Design team shares how Web Components are a great choice to empower design systems at Google scale.
Design once. Build once. Use everywhere.
Resources:
Lion Web Components → https://goo.gle/363MUey
Prefers-color-scheme → https://goo.gle/2UXBp1F
Spectrum Web Components → https://goo.gle/3pZXomU
Quack→ https://goo.gle/quack
Github material-components-web-components → https://goo.gle/mwc
Speakers: Liz Mitchell, Rody Davis
Watch all Chrome Developer Summit sessions here → https://goo.gle/cds20-sessions
Subscribe to Google Chrome Developers here → https://goo.gle/ChromeDevs
#chromedevsummit #chrome #webdesign
event: Chrome Dev Summit 2020; re_ty: Publish; product: Chrome – General; fullname: Rody Davis;
source
Yet again, no mention of SEO or at least a hint
Friends
God Bless
Ysa Medan
3:37 I’m so ready Liz [HELP]
The whole duck theme is quite fun but Quackette is going too far and treating viewers like children. Also, bread is bad for ducks.
duck-duck go
Any chance of more LitElement and Web Component videos like this? I really miss the Polycasts videos.
The cringe is strong with this one.
i built a library 1 year ago, not sure it's still relevant.
https://github.com/Andrewrico/thisel-javascript-library/blob/master/thisel.js
I am confused.. Google has Material Components, but then you say we can use Lion Components and Adbobe Components?
This is an awesome video, thanks for making it!!! I will add, seeing demos, not in Prettier is maybe the most nails on chalkboard thing I see nowadays. I also still feel like this is pre the removal of the boilerplate. There's so much extra in the files. Thanks for making, still hard to see a need to rewrite or relearn yet, if we were greenfield this might be a great choice for us!
There are so many problems with Web Components, I really do not understand why Google is pushing them
There is still a problem: its too verbose. Ignoring the component file size, it still has 16 methods, for a single and simple component. In large scale this will generate a giant bundle and be Hard to maintain. An Framework /lib May reduce this using HOC, decorators etc (like React did) but still
There is that sesame street tone again. I wonder, do people with an interested in web-tech exsists to whom this style is helpful and welcome ?
web components sound awesome, isolate css will be amazing. hopefully we can choose which parent css rules to pass through / whitelist
25:31 u state that the palette shade token doesn't need 'inherit' enabled. didn't quite get that. mind elaborating on that please?
You cant name an argument "new" thats a reserved keyword….
Great but too much of these Chrome videos are using props and framework processes examples. The frameworks have their own training, wish Chrome would stick to browser and vanilla.
Thanks for these tips, they will help me in the web-component based design system I'm working on.
I love create Web Components! Actually I work with a design system based on Web Components and ReactJS and it's amazing 🥰
I appreciate the effort, but let's face it. Shadow DOM is overcomplicated. It was sold by Polymer as being faster, but in the end it was 20% slower. It was sold as CSS containment, but now we have CSS properties for layout containment, and they are faster. It was sold as style containment, but it was so hard to style globally that Chrome Team invented a function to style it globally, breaking the initial paradigm. TLDR ; In general just use custom HTML element names and Javascript modules FTW. Use Custom Elements whenever needed, and never use Shadow DOM unless you want to finish bald.
Teach us Liz! This is the way! 🐤🐥🦆