Material Design Components Web in Chrome Extension

Question

I have a Chrome extension that currently uses Material Design Components, Web. I have no issues using unminified CSS, however the JS does not appear to be working correctly.

If I use the source code, there should be an animation when focusing on a text field as the example shows, but I do not experience this in my extension.

I'm really hoping this isn't some sort of security limitation by Chrome... wouldn't make sense that their browser couldn't detect and support their own framework.

popup.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Chrome Ext</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  </head>
  <body>
    <div class="mdc-text-field">
      <input type="text" id="my-text-field" class="mdc-text-field__input">
      <label class="mdc-floating-label" for="my-text-field">Hint text</label>
      <div class="mdc-line-ripple"></div>
    </div>
  </body>
</html>

The "Hint Text" should appear above the text, like the example above.

Note: I had no problem with Material Design Lite, but since that is no longer supported, I figured I'd rebuild using the modern framework.

Can you add any details like: code used, error problem encountered? [How do I ask a good question?](http://stackoverflow.com/help/how-to-ask), [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) Show the community what you have tried. — MαπμQμαπkγVπ.0, Sep 20 '18 at 10:29
I've added the snippet to my question and it looks like it's even failing as a plain html file. — O P, Sep 20 '18 at 14:42

benvc · Answer 1 · 2018-10-19T13:01:29.103

MDC is a bit different than MDL in that the js dependent features require you to instantiate the MDC component. There are various ways to do that depending on how you are incorporating the MDC js into your project. In your html example above, you could probably add a script tag with a one-liner to instantiate the MDC textfield. Something like:

<script>
  mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
</script>

You can also use mdc.autoInit() with data-mdc-auto-init markup to instantiate MDC components (see the Auto Init docs for details).

Material Design Components Web in Chrome Extension

1 Answers1