Element Creation

/**
 * Base class that provides the core API for Polymer's meta-programming
 * features including template stamping, data-binding, attribute deserialization,
 * and property change observation.
 */
class PolymerElement extends HTMLElement {
  /** Element tag name for registration */
  static get is(): string;
  
  /** Template for the element's shadow DOM */
  static get template(): HTMLTemplateElement;
  
  /** Property configuration object */
  static get properties(): PropertyDeclarations;
  
  /** Array of observer method names and their dependencies */
  static get observers(): string[];
  
  /** Import path for resolving relative URLs */
  static get importPath(): string;
  
  /** Polymer version */
  static get polymerElementVersion(): string;
  
  /** Root node of stamped template (usually shadowRoot) */
  root: ShadowRoot | HTMLElement;
  
  /** Map of id->element for template elements with id attributes */
  $: {[id: string]: Element};
  
  /** Import path for this element */
  importPath: string;
  
  /** Root path for the application */
  rootPath: string;
  
  // Lifecycle methods
  constructor();
  connectedCallback(): void;
  disconnectedCallback(): void;
  ready(): void;
  
  /** Update ShadyCSS styles */
  updateStyles(properties?: StyleProperties): void;
  
  /** Resolve URL relative to element's import path */
  resolveUrl(url: string, base?: string): string;
}

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

// Basic element
class SimpleElement extends PolymerElement {
  static get is() { return 'simple-element'; }
  
  static get template() {
    return html`<div>Hello World!</div>`;
  }
}

customElements.define(SimpleElement.is, SimpleElement);

// Element with properties and observers
class UserCard extends PolymerElement {
  static get is() { return 'user-card'; }
  
  static get template() {
    return html`
      <div class="card">
        <h2>[[fullName]]</h2>
        <p>Age: [[age]]</p>
        <p>Status: [[status]]</p>
      </div>
    `;
  }
  
  static get properties() {
    return {
      firstName: String,
      lastName: String,
      age: Number,
      fullName: {
        type: String,
        computed: 'computeFullName(firstName, lastName)'
      },
      status: {
        type: String,
        value: 'active',
        observer: 'statusChanged'
      }
    };
  }
  
  static get observers() {
    return [
      'userDataChanged(firstName, lastName, age)'
    ];
  }
  
  computeFullName(first, last) {
    return `${first} ${last}`;
  }
  
  statusChanged(newStatus, oldStatus) {
    console.log(`Status changed from ${oldStatus} to ${newStatus}`);
  }
  
  userDataChanged(first, last, age) {
    console.log('User data updated:', { first, last, age });
  }
}

customElements.define(UserCard.is, UserCard);

/**
 * Template literal tag for creating HTML template elements with data binding support
 * @param strings - Template string parts
 * @param values - Interpolated values
 * @returns HTMLTemplateElement ready for use in Polymer elements
 */
function html(strings: TemplateStringsArray, ...values: any[]): HTMLTemplateElement;

import { html } from '@polymer/polymer/polymer-element.js';

// Basic template
const basicTemplate = html`<div>Static content</div>`;

// Template with data binding
const dataTemplate = html`
  <div>
    <h1>[[title]]</h1>
    <p on-click="handleClick">Click me: [[message]]</p>
    <input value="{{inputValue::input}}">
  </div>
`;

// Template with conditional and loops
const dynamicTemplate = html`
  <div>
    <template is="dom-if" if="[[showHeader]]">
      <h1>[[headerText]]</h1>
    </template>
    
    <template is="dom-repeat" items="[[items]]" as="item">
      <div class="item">[[item.name]]: [[item.value]]</div>
    </template>
  </div>
`;

/**
 * Constructor - called when element is created or upgraded
 */
constructor(): void;

/**
 * Called when element is connected to the document
 */
connectedCallback(): void;

/**
 * Called when element is disconnected from the document  
 */
disconnectedCallback(): void;

/**
 * Called when local DOM is ready and all property effects have been applied
 */
ready(): void;

/** Current Polymer version string */
const version: string;

import { version } from '@polymer/polymer/polymer-element.js';
console.log('Polymer version:', version); // "3.5.2"

interface PropertyDeclarations {
  [property: string]: PropertyType | PropertyDeclaration;
}

interface PropertyDeclaration {
  type?: PropertyType;
  value?: any | (() => any);
  reflectToAttribute?: boolean;
  readOnly?: boolean;
  notify?: boolean;
  computed?: string;
  observer?: string;
}

type PropertyType = StringConstructor | NumberConstructor | BooleanConstructor | ArrayConstructor | ObjectConstructor;

interface StyleProperties {
  [property: string]: string;
}