Bug: ESlint not detecting Safari limited support of custom components

[lukaas33]

In CanIUse I found that Safari browsers have only limited support for the customized built-in-elements.
https://caniuse.com/custom-elementsv1

I have Eslint setup with compatibility checking in order to catch such problems.
However, it passes without errors which does not seem like correct behaviour.

My config:

import pluginJs from "@eslint/js";
import compat from "eslint-plugin-compat";
import globals from "globals";

export default [
  {
    files: ["**/*.mjs"],
    languageOptions: { sourceType: "module" },
  },
  {
    files: ["**/*.js"],
    languageOptions: { sourceType: "commonjs" },
  },
  {
    files: ["functions/**/*.js"], // backend code
    languageOptions: { 
      sourceType: "commonjs",
      globals: {
        ...globals.node, // Include node globals like 'process'
      } 
    },
  },
  {
    files: ["tests/**/*.js"], // Jest tests
    languageOptions: { 
      sourceType: "commonjs",
      globals: {
        ...globals.browser, // Include browser globals like 'document' arising from puppeteer
        ...globals.jest, // Include Jest globals like 'test', 'expect'
      }
    },
  },
  {
    files: ["public/**/*.{js,mjs}"], // Browser facing code
    languageOptions: { 
      sourceType: "commonjs" ,
      globals: {
        ...globals.browser, // Include browser globals like 'document'
      }
    },
    settings: {
      browsers: [
        "> 1%",
        "last 3 versions",
        "not dead",
        "defaults",
        "not op_mini all"
      ]
    },
    plugins: {
      compat: compat // Compatibility testing in browser facing code
    },
    rules: {
      ...compat.configs["flat/recommended"].rules,
    }
  },
  pluginJs.configs.recommended
];

Sample code that should give errors:

class FooterComponent extends HTMLElement {
  /**
   * Constructs a new instance of the Footer component.
   *
   * Is added as follows:
   * <footer is="footer-component">
   *  <a href="[target]">[text]</a>
   * </footer>
   *
   * @class FooterComponent
   * @extends {HTMLElement}
   * @constructor
   */
  constructor() {
    super()
  }
}

customElements.define('footer-component', FooterComponent, {
  extends: 'footer'
})