Chrome 扩展中的 Material Design Components Web答案

【问题标题】：Material Design Components Web in Chrome ExtensionChrome 扩展中的 Material Design Components Web
【发布时间】：2018-09-19 21:51:44
【问题描述】：

我有一个当前使用 Material Design Components, Web 的 Chrome 扩展程序。我使用未缩小的 CSS 没有问题，但是 JS 似乎无法正常工作。

如果我使用source code，则在关注文本字段时应该有一个动画，如示例所示，但我在我的扩展程序中没有遇到这种情况。

我真的希望这不是 Chrome 的某种安全限制......他们的浏览器无法检测和支持他们自己的框架是没有意义的。

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>

“提示文本”应出现在文本上方，如上例。

注意：我对 Material Design Lite 没有任何问题，但由于它不再受支持，我想我会使用现代框架进行重建。

【问题讨论】：

显示您的代码。
您可以添加任何详细信息，例如：使用的代码，遇到的错误问题吗？ How do I ask a good question?, How to create a Minimal, Complete, and Verifiable example 向社区展示你的尝试。
我已将 sn-p 添加到我的问题中，看起来它甚至无法作为纯 html 文件。
你是如何将 Material UI 添加到你的 chrome 扩展的？

标签： javascript google-chrome google-chrome-extension material-design mdc-components

【解决方案1】：

MDC 与 MDL 有点不同，因为依赖于 js 的功能需要您实例化 MDC 组件。有多种方法可以做到这一点，具体取决于您incorporating the MDC js into your project。在上面的 html 示例中，您可能会添加一个带有单行符的脚本标记来实例化 MDC 文本字段。比如：

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

您还可以使用带有data-mdc-auto-init 标记的mdc.autoInit() 来实例化MDC 组件（有关详细信息，请参阅Auto Init docs）。

【讨论】：