Rob Dodson robdodson

How should Preact handle setting objects and arrays on undefined Custom Element properties?

1. Server side rendering a Custom Element

In this scenario you're just trying to bootstrap a Custom Element with some data so it can render as soon as it hits the page. You don't have the ability to set properties, so serializing objects and arrays to string attributes seems like the only way to do it? Custom Elements could be written to expect this and call JSON.parse on their obj/arr observed attributes.

2. Lazy loading the definition for a Custom Element

raw html will be appended to the main document. If the html appears in a <head> in the import it will get appended to <head> in the main document. Otherwise it will get appended to <body>. This is unlike the behavior of current HTML Imports. It makes things kind of like an include. The reason elements are injected is because there's no reference back to the import so if a custom element queries for its template using document.querySelector() it needs to resolve to the current document.
<template> elements are also injected into the main page, but they're injected into the <head> which seems...odd.
script elements will run as if they are es modules imported into the page. These script elements can import other modules including node_modules.
Linked images (like url('') in CSS) get run in a Node vm (https://nodejs.org/api/vm.html) to get access to the returned value of

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title></title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
	<h2>Hello from outside the Shadow DOM!</h2>

	import classList from 'dom-classlist';
	import matches from 'dom-matches';

	/* https://github.com/WICG/focus-ring */
	document.addEventListener('DOMContentLoaded', function() {
	var hadKeyboardEvent = false;
	var keyboardThrottleTimeoutID = 0;
	var previousActiveElement = null;

	// These elements should always have a focus ring drawn, because they are

	// Handlers managed by the addFocusStates and removeFocusStates methods.
	var onMouseDown = function() {
	this.classList.add('pressed');
	};

	var onMouseUp = function() {
	this.classList.remove('pressed');
	};

	var onFocus = function() {

	var onload = function() {
	// If web components are supported this will fire immediately,
	// othewrise it will wait for the polyfills to load.
	// Load your components here
	var components = document.createElement('script');
	script.async = true;
	script.src = '../dist/page-sections.js';
	document.head.appendChild(components);
	};

	/**
	* @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
	*/

	export default class XFoo extends HTMLElement {
	message: string;
	constructor() {
	super();
	}
	connectedCallback() {
	this.innerHTML = `<p>${this.message}</p>`;
	this.addEventListener('click', this.onClick);
	}
	onClick(e: Event) {

	export default class XCheckbox extends HTMLElement {
	constructor() {
	this._checked = false;
	}
	connectedCallback() {
	this.addEventListener('click', this._onclick);
	}
	disconnectedCallback() {
	this.removeEventListener('click', this._onclick);
	}