Guidance On M3 Web JavaScript Requirement?

[ronnievsmith]

Customized built in elements continue to work in browsers with JavaScript disabled; The HTML standard describes how elements "automatically inherit semantics and behavior" of their parent class, e.g. <select>, <input>, and <progress>.

Does Material 3 Web employ customized built-in elements or are M3 Web components autonomous custom elements, i.e. extends HTMLElement?

If M3 team chose the autonomous custom element approach, can you explain rationale or value in not choosing customized built in elements?

When I disable JavaScript, the M3 Demo elements such as <md-checkbox> are not working? Is it safe to say that Material Design for Web requires JavaScript?

[asyncLiz]

Yes, this Material Web Components library requires JavaScript. It is not a CSS-only library.

We use JavaScript to fully support the visuals of the Material Design spec and the latest ARIA accessibility patterns. It is not possible to fully support either with only HTML and CSS.

MWC uses autonomous custom elements, not customized built-in elements (aka <button is="md-filled-button">). We do this to support Safari, which does not support customized built-in elements (https://caniuse.com/custom-elementsv1).

If your application requires supporting JavaScript-disabled browsers, then our components will not be a good fit. However, you can still use our Sass tokens to style built-in elements like <button> to look like the Material Design spec (with some limitations).

[ronnievsmith]

If M3 Web customized native elements such as <button vs creating custom elements such as <md-button> this would not be the case. It seems like a best of both worlds is achievable, i.e. where there is a native element, respect it¹; where there is not a native element, create custom element.

¹ Do not move an ancient boundary stone set up by your ancestors. - Proverbs 22:28

[asyncLiz]

Button has a ripple, which needs web animations to adjust the ripple's starting point to be where the user pressed. It is not possible to do that without JavaScript.

[e111077]

Many Material Design components (as well as native html element interaction patterns) rely on JavaScript to achieve accessibility and full specification compliance. These requirements include:

• Accessibility (ARIA interactions): Although native elements (like <input>) are used, JavaScript handles the management of ARIA attributes and interactions for optimal accessibility e.g. combobox.
• Material Design animations: Specific Material Design animation effects, which go beyond the capabilities of basic CSS transitions, necessitate the use of JavaScript and Web Animation APIs.
• Persistent form errors: Material Design specifications require persistent form control error handling. This functionality is not natively supported by the web platform and requires JavaScript.

The Material Web library aims to provide a production-ready, spec-compliant, and accessible implementation. Cross-framework support is achieved using native web components, and the project team actively works with web platform engineers and committees to improve web platform accessibility.

JavaScript-less Considerations:

The only javascript-less use case we support is SSR strictly for performance. For performance optimization, server-side rendering (SSR) use cases are supported using native Declarative Shadow DOM. However, to ensure full compliance with Google accessibility standards and Material Design specifications, JavaScript is required and hydration of SSR components is encouraged.

[ronnievsmith]

Directing web developers to abandon native (built-in) (semantic) elements for library dependent ones seems misdirection to me. If I had the option to use native spec elements, I would be onboard.

Pretty big red letters on MDN:

Developers should prefer using the correct semantic HTML element over using ARIA, if such an element exists.

I've never heard of form error handling being a fatal flaw in HTML/CSS.

[e111077]

I think there is a fundamental difference of values here, and I'm sorry that we do not disagree.

[ronnievsmith]

Microsoft's web UI not only requires users abandon native HTML elements as well, but also forces developers to adopt a Facebook development framework called "React". And, it also fails to <span> without JavaScript enabled as well, vs failing to nearest native HTML element.

[ronnievsmith]

The M3 demo's are scoring relatively low on ARIA / Accessibility? My web pages score 100 but I do not use ARIA, just plain proper HTML. Maybe the M3 demo's are not intended to actually be production / accessible?

[asyncLiz]

Keep in mind that our catalog has not been optimized for accessibility yet, and is a poor indicator for the accessibility capabilities of an individual component.

[ronnievsmith]

OpenUI will straighten all this out in time...

The main takeaway from these numbers is that the industry massively fails to build custom checkboxes correctly. These are the biggest brands in the world. - OpenUI CheckBox Findings

[asyncLiz]

Closing since this discussion is resolved. Our web components, like many other UI libraries, require JavaScript to run and we will not be changing that.

If this is a blocker, we do not recommend using our components. Instead, you could try using our Sass tokens API to create CSS for a near-Material experience using built-in elements without the functionality or accessibility features that require JavaScript.

[asyncLiz]

// m3-button.scss
@use 'sass:map';
@use '@material/web/tokens';

$button-tokens: tokens.md-comp-filled-button-values();

button {
  border-radius: map.get($button-tokens, 'container-shape');
  background: map.get($button-tokens, 'container-color');
  color: map.get($button-tokens, 'label-text-color');
  // Continue for additional tokens...
}

// ...possibly including stateful tokens
button:hover {
  color: map.get($button-tokens, 'hover-label-text-color');
}

Install and use sass to compile to CSS:

npm install @material/web sass
npx sass --load-path=node_modules m3-button.scss
# Generates m3-button.css

Let me know if that works! Doing it off the top of my head, so I hope I didn't miss a step.

[ronnievsmith]

Thanks. Well, it did produce this, but it doesn't really look super fancy.

[asyncLiz]

You'll need to add the rest of the tokens yourself, as well as remove default user-agent styles that are applied to the <button>, like borders.

Our docs have links to token files like md-comp-filled-button. You can look through the list of $supported-tokens to see which ones are available for you to implement. You can also refer to our styles to see how we implement them.

[ronnievsmith]

I can't get it to work. If you can figure it out please do share. I would like to try this.

[asyncLiz]

Were you able to see the list of supported tokens in the links I gave?

What part can you not get to work? You can add additional CSS properties by calling map.get() multiple times for different token keys.

[ronnievsmith]

I do see the tokens and I am excited to get the CSS only M3 working. Here's precisely what I tried.

From a terminal in the location of node_modules/@material/web/tokens/_md-comp-outlined-button.scss enter npx sass --load-path=node_modules _md-comp-outlined-button.scss m3.css. The resulting file is empty.

[asyncLiz]

Our Sass partial files in @material/web/tokens do not emit CSS styles, so you can't compile them to a stylesheet. They are part of a Sass API and provide functions that you can call in your own concrete Sass stylesheet.

You need to use those Sass functions to get the values and define the CSS styles yourself, like in the example I provided above. Our tokens only provide the values.

For example, we have our own concrete Sass files for button. Each emits the CSS required for the button variants (filled requires filled-styles, shared-styles, and shared-elevation-styles). You should be able to compile those stylesheets to see how we apply the token values.

npx sass --load_path=node_modules node_modules/@material/web/button/internal/*.scss

[asyncLiz]

I'd recommend reading through https://sass-lang.com/documentation/ as well. Our Sass does a lot of heavy work, and it can be really complicated to digest.

[ronnievsmith]

I'm pretty sure your command switch --load_path=node_modules has a typo at _. But no that does not produce anything either.

Can you share specific command or instruction on how I can get M3 CSS for an outlined button?

[asyncLiz]

There is not an API provided to do that. You need to create the CSS yourself like in the above examples.

You can look at how we write CSS for reference, but our code does not provide what you're asking for.

[ronnievsmith]

There has been no provided working example of using M3 CSS only. I asked on StackOverflow and the question was actually downvoted and noone has answered.

[asyncLiz]

You can use M3 with CSS only by using our Sass tokens. See #5412 (reply in thread)

Copied from above:

// m3-button.scss
@use 'sass:map';
@use '@material/web/tokens';

$button-tokens: tokens.md-comp-filled-button-values();

button {
  border-radius: map.get($button-tokens, 'container-shape');
  background: map.get($button-tokens, 'container-color');
  color: map.get($button-tokens, 'label-text-color');
  // Continue for additional tokens...
}

That is our only API offering that can be used to make CSS-only components. It does require you to write the CSS yourself.