I’m using the vaadin platform designer to generate screen layouts.
The designer allows you to create a dom-module layout with slots which can then be used in other layouts.
The concern is that when I do this and load the derived layout in a browser I’m seeing multiple errors ‘Failed to execute ‘define’’.
See below.
My interpretation of the errors is that both the base layout and the derived layout import ‘polymer.html’ and any common components.
Is this something that I should be concerned about?
We are also trying to obtain very fast page load times (so small pages, low execution overhead).
Whilst I would assume that the browser will only try to pull the common files once, I would assume that there is some execution time being wasted in considering these files and in trying to execute the ‘define’ method.
Does/can something need to be done to remove these duplicates?
Should we be avoiding re-using dom-modules if page load/start times are important.
The errors related the the sample code below:
dom-module.html:148 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry
And the derived dom-module that generates the errors:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="baseLayouts/dialog-layout.html">
<link rel="import" href="../../bower_components/vaadin-date-picker/src/vaadin-date-picker.html">
<link rel="import" href="../../bower_components/vaadin-radio-button/src/vaadin-radio-group.html">
<dom-module id="leave-settings">
<template>
<style include="shared-styles">
:host {
display: block;
height: 100%;
}
</style>
<dialog-layout>
<p slot="title">Your Holiday Leave</p>
<div slot="body" id="forward-calls-body" style="width:100%;">
<div>
<vaadin-date-picker id="start" label="First Day" placeholder="Pick a date"></vaadin-date-picker>
<vaadin-date-picker id="end" label="Last Day" placeholder="Pick a date"></vaadin-date-picker>
</div>
</div>
</dialog-layout>
</template>
<script>
class LeaveSettings extends Polymer.Element
{
static get is()
{
return 'leave-settings';
}
static get properties()
{
return {
// Declare your properties here.
};
}
}
customElements.define(LeaveSettings.is, LeaveSettings);
customElements.whenDefined('vaadin-date-picker').then(function()
{
debugger;
var start = document.querySelector('#start');
var end = document.querySelector('#end');
start.addEventListener('change', function()
{
end.min = start.value;
// Open the second date picker when the user has selected a value
if (start.value)
{
end.open();
}
});
end.addEventListener('change', function()
{
start.max = end.value;
});
});
</script>
</dom-module>
Base module used in the above derived module
<link href="../../bower_components/polymer/polymer.html" rel="import">
<link rel="import" href="../../bower_components/vaadin-button/src/vaadin-button.html">
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../../bower_components/vaadin-button/src/vaadin-button.html">
<dom-module id="dialog-layout">
<template>
<style include="shared-styles">
:host {
display: block;
height:100%;
}
.nj-dialog-layout
{
display:flex;
flex-direction: column;
height:100%;
}
.nj-dialog-title
{
width: 100%;
font-size: 30px;
font-weight: bold;
}
.nj-dialog-body
{
flex-grow: 1;
align-self: flex-start;
width:100%;
}
.nj-dialog-buttons
{
display:flex;
width: 100%;
align-self: flex-end;
}
.nj-dialog-button-cancel
{
align-self: flex-start;
}
.nj-button-spacer
{
flex-grow: 1;
}
.nj-dialog-button-save
{
align-self: flex-end;
}
</style>
<div class="nj-dialog-layout">
<div class="nj-dialog-title">
<slot name="title"></slot>
</div>
<div class="nj-dialog-body">
<slot name="body"></slot>
</div>
<div class="nj-dialog-buttons">
<vaadin-button>
Cancel
</vaadin-button>
<div class="nj-button-spacer"></div>
<vaadin-button theme="primary">
Save
</vaadin-button>
</div>
</div>
</template>
<script>
class DialogLayout extends Polymer.Element {
static get is() {
return 'dialog-layout';
}
static get properties() {
return {
// Declare your properties here.
};
}
}
customElements.define(DialogLayout.is, DialogLayout);
</script>
</dom-module>