Rob Dodson robdodson

Go to chrome://flags/#enable-devtools-experiments and click 'Enable'. This will turn on the experiment in your version of Chrome.
Restart Chrome.
Open your DevTools and click the three vertical dots in the top right to open the context menu.
Click on 'Settings'.
Click on the 'Experiments' tab on the left hand side.
Check the box next to 'Accessibility Inspection'.
Close the DevTools, then reopen them.
You're all set! Go inspect an element in the Elements panel and you should see a new 'Accessibility' tab over near the Style inspector.

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.

	// default role is "slider"
	// set using private accessibleNode by the element author
	<custom-slider id="mySlider">

	// element consumer changes role to "button"
	mySlider.accessibleNode.role = "button"

	// element consumer nulls role
	mySlider.accessibleNode.role = null

	class CustomSlider extends HTMLElement {
	constructor() {
	super();
	this.accessibleNode.role = 'slider';
	this.accessibleNode.valueMin = 0;
	this.accessibleNode.valueMax = 5;
	this.accessibleNode.valueNow = 3;
	this.accessibleNode.valueText = 3;
	}
	}

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Hello World</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
	<my-element></my-element>

	<!-- src/my-element.html -->

	<link rel="import" href="../bower_components/polymer/polymer-element.html">

	<dom-module id="my-element">
	<template>
	<h1>Hello, World! It's [[today]].</h1>
	</template>
	<script type=”module”>
	// Heyyyy, we're pulling in a Node module!

	/* webpack.config.js */

	var HtmlWebpackPlugin = require('html-webpack-plugin');
	var CopyWebpackPlugin = require('copy-webpack-plugin');
	var path = require('path');

	module.exports = {
	// Tell Webpack which file kicks off our app.
	entry: path.resolve(__dirname, 'src/index.js'),
	// Tell Weback to output our bundle to ./dist/bundle.js

	<custom-listbox role="listbox"
	aria-describedby="generated-id1 generated-id2"
	aria-activedescendant="generated-id3">

	<custom-slider min="0" max="5" value="3" role="slider"
	tabindex="0" aria-valuemin="0" aria-valuemax="5"
	aria-valuenow="3" aria-valuetext="3"></custom-slider>

Rob Dodson robdodson

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

1. Server side rendering a Custom Element

2. Lazy loading the definition for a Custom Element