Элемент Polymer 3 — NotSupportedError

Я начал руководство по началу работы с Polymer 3.0 и решил немного поиграть с ним. Я начал новый проект и пытаюсь добавить paper-dropdown-menu к view1, который получает данные из массива.

вид1.js:

/**
 * @license
 * Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
 * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 * Code distributed by Google as part of the polymer project is also
 * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import './shared-styles.js';
import './car-make.js'

class MyView1 extends PolymerElement {
  static get template() {
    return html`
      <style include = "shared-styles">
        :host {
          display: block;

          padding: 10px;
        }
      </style>

      <div class = "card">
        <div class = "circle">1</div>
        <h1>View One</h1>
        <car-make></car-make>
      </div>
    `;
  }
}

window.customElements.define('my-view1', MyView1);

Я создал элемент, который будет это делать, и когда я запустил демонстрацию, он работал просто отлично.

Элемент car-make.js:

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import {} from '@polymer/polymer/lib/elements/dom-repeat.js';
import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
import '@polymer/paper-item/paper-item.js';
import '@polymer/paper-listbox/paper-listbox.js';
/**
 * `car-make`
 * Car manufacturers dropdown
 *
 * @customElement
 * @polymer
 * @demo demo/index.html
 */


class CarMake extends PolymerElement {
  static get template() {
    return html`
      <style>
        :host {
          display: block;
        }
      </style>
      <paper-dropdown-menu label = "Car manufacturer">
        <paper-listbox slot = "dropdown-content" required>
        <template is = "dom-repeat" items = "{{cars}}">
            <paper-item>{{item}}</paper-item>
        </template>
        </paper-listbox>
      </paper-dropdown-menu>
    `;
  }
  static get properties() {
    return {
      cars: {
        type: Array,
        value: getCars(),
      }
    };
  }
  constructor() {
    super();
  }
}
function getCars() {
  return ['AC', 'ALPINA', 'Abarth'];
}
window.customElements.define('car-make', CarMake);

Но это всегда терпит неудачу с NotSupportedError: Operation is not supported, вызванным polymer-fn.js в строке 49, когда я добавляю его в my-view1.js:

customElements.define(klass.is,
    /** @type {!HTMLElement} */
    klass);
    return klass

Это функция, которая вызывает ошибку. Что я делаю неправильно?

вы обслуживаете свой проект? Вы должны установить Polymer-cli, а затем запустить polymer serve

Kuba Šimonovský 05.03.2019 15:14
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
166
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Определение стоимости автомобилей в стиле свойств неверно, вместо этого используйте:

static get properties() {
    return {
      cars: {
        type: Array

      }
    };
  }
  constructor() {
    super();
    this.cars=['AC', 'ALPINA', 'Abarth' ];
  }

Здесь Демо (работает, но может выдать ошибку из-за дополнительных зависимостей. (просто для восстановления)

Другие вопросы по теме