Chrome扩展程序自定义元素不起作用

Question

我正在编写一个定义自定义元素的chrome扩展程序。我正在使用webcomponents库（documentation here）来填充我的自定义元素。

如果我在自定义元素中调用该函数，则会收到Uncaught TypeError: ... is not a function错误。我在做什么错了？

background.js

class CustomElement extends HTMLElement {
    constructor() {
        super();
    }

    foobar() {
        console.log("foobar!");
    }
}

// Define the new element
customElements.define('custom-element', CustomElement);

const test = document.createElement("custom-element");
test.id = "test";

// works
test.foobar();

// doesn't work
$("#test").get(0).foobar();

// doesn't work
document.getElementById("test").foobar();

Manifest.json

{
  "name": "Test",
  "version": "1.0",
  "description": "Test",
  "browser_action": {
    "default_title": "Test",
    "default_popup": "html/popup.html"
  },
  "content_scripts": [ {
    "js": [ "scripts/jquery-3.3.1.min.js", "scripts/background.js", "scripts/webcomponents-bundle.js" ],
        "matches": ["<all_urls>"]
  }],
  "manifest_version": 2
  }

如果我打开Chrome控制台并尝试在其中找到我的元素/调用foobar()，那么它也不起作用。