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:
Lion Web Components → goo.gle/363MUey
Prefers-color-scheme → goo.gle/2UXBp1F
Spectrum Web Components → goo.gle/3pZXomU
Quack→ goo.gle/quack
Github material-components-web-components → goo.gle/mwc
Speakers: Liz Mitchell, Rody Davis
Watch all Chrome Developer Summit sessions here → goo.gle/cds20-sessions
Subscribe to Google Chrome Developers here → goo.gle/ChromeDevs
#chromedevsummit #chrome #webdesign
event: Chrome Dev Summit 2020; re_ty: Publish; product: Chrome - General; fullname: Rody Davis;

[@maxjf1]

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

[@manueldiera6781]

Those are very valid points. I'm currently working with Stencil and will be trying the HOC pattern to avoid so much duplication. Would like your opinion on that if you get a chance to check it out.

[@maxjf1]

@@manueldiera6781 cool. Share with us any News 😊

[@manueldiera6781]

@@user-if1de8pt2j nice! I'll research this, see how they did it/what patterns I can learn from there.

[@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?

[@blittr]

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

[@paulhmason]

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

[@user-gq1jv7lu6d]

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

[@shashankaryaofficial]

lol

[@tedfitzpatrickyt]

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

[@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 ?

[@waso]

Me

[@alarissaabreu]

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

[@user-dg6zz8oz3v]

B

[@TheRiteHand]

3:37 I’m so ready Liz [HELP]

[@John223]

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

[@johngill5175]

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!

[@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.

[@PatentLobster]

duck-duck go

[@hcsftw]

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

[@akauppi2]

Would like to see a video about those problems. Really. Know Svelte.

[@herrbasan]

Overall they see how much damage UI frameworks have done to the web. Just from an environmental argument we could save an insane amount of energy if there was a sleeker way of doing UI on the web. Personally, i don't see the need at all. HTML/JS/CSS is very powerful, the logic needed for most components is tiny, the markup for the UI is natively supported and depedency free, so for me neither web components nor frameworks make any sense. But from googles perspective, they have to offer something going agains this mess that is javascript UI frameworks. Unfortunately, WC is still a bit messy aswell. But i'm open to it.

[@hcsftw]

@@herrbasan I do not understand why you consider frameworks a mess. I and a lot of other people would disagree. If you do not need it, that fine, but there are enough reasons to use one - not only for their Component system.

[@yongkiamirson2376]

Friends God Bless Ysa Medan

[@jadeleonard1620]

Teach us Liz! This is the way! 🐤🐥🦆

[@dustinpoissant]

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

[@mouradaouinat8721]

and the class reserved keywords?

[@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.

[@antoineweb1]

amen

[@DenisTRUFFAUT]

@@alukart123 Yes. Also, Shadow DOM creates a barrier for competitors (web crawlers, browsers) since they are unable to see the shadowed content. Good for Google, but not good for the web. Just like AMP.

[@SaladoElFede]

Amen x2

[@ChrisSmith-no7dk]

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

[@creatorsremose]

The cringe is strong with this one.