Design at scale with Web Components (and ducks)

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:

Speakers: Liz Mitchell, Rody Davis

#chromedevsummit #chrome #webdesign

event: Chrome Dev Summit 2020; re_ty: Publish; product: Chrome - General; fullname: Rody Davis;

[herrbasan]

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 ?

[maxjf]

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

[YinonOved]

25:31 u state that the palette shade token doesn't need 'inherit' enabled. didn't quite get that. mind elaborating on that please?

[paulhmason]

Any chance of more LitElement and Web Component videos like this? I really miss the Polycasts videos.

[blittr]

Thanks for these tips, they will help me in the web-component based design system I'm working on.

[augmentos]

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.

[Даниилангелчеловек]

I am confused.. Google has Material Components, but then you say we can use Lion Components and Adbobe Components?

[DenisTRUFFAUT]

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.

[alarissaabreu]

I love create Web Components! Actually I work with a design system based on Web Components and ReactJS and it's amazing 🥰

[tedfitzpatrickyt]

web components sound awesome, isolate css will be amazing. hopefully we can choose which parent css rules to pass through / whitelist

[ChrisSmith-nodk]

The whole duck theme is quite fun but Quackette is going too far and treating viewers like children. Also, bread is bad for ducks.

[John]

Yet again, no mention of SEO or at least a hint

[johngill]

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!

[dustinpoissant]

You cant name an argument "new" thats a reserved keyword....

[hcsftw]

There are so many problems with Web Components, I really do not understand why Google is pushing them