Web Component Interoperability - sgml/signature GitHub Wiki

Babel

https://medium.com/@WebReflection/js-is-not-worse-than-84a5fca0e87d

XSS

Widgets

Globals

Metrics

Abstractions

Feature Parity

X-Tag

xtag.create('x-clock', class extends XTagElement {
  connectedCallback () {
    this.start();
  }
  start (){
    this.update();
    this._interval = setInterval(() => this.update(), 1000);
  }
  stop (){
    this._interval = clearInterval(this._data.interval);
  }
  update (){
    this.textContent = new Date().toLocaleTimeString();
  }
  'tap::event' (){
    if (this._interval) this.stop();
    else this.start();
  }
});

Docs

Common Data

vCard

iCal

creativecommons

schema.org

csv/tsv

Dependency Replacement

Let's say you provide component A which contains component B which contains component C. Someone else wants to replace C with D, so they have to customize B to create D instead of C (which results in component E) and then customize component A to instantiate E instead of B. So the end goal was A contains B contains D, but the result was F contains E contains D.

##HTML5 Interactive Elements <menu> element jpeg-xr requestidlecallback

COMMON COMPONENTS

`<base>` decorator 
`<href>` proxy
`<form>` validation
`<canvas>` throttling
`<pre>` escaping
`<iframe>` cors
bookmarklet csp
`<img>` srcset
`<svg>` transclusion
wai-aria
i18n

Semantic UI

Transclusion

The collections are the key:

Added React.Children.toArray which takes a nested children object and returns a flat array with keys assigned to each child. This helper makes it easier to manipulate collections of children in your render methods, especially if you want to reorder or slice this.props.children before passing it down. In addition, React.Children.map now returns plain arrays too.

ES6 Modules

With CommonJS, on the other hand, the shape of a module is not known until after the code is evaluated. What this means is, without making significant changes to the ECMAScript language spec, it will not be possible to use Named Imports from a CommonJS module.

Pattern Category 	 Library 	 API Method Name 	 URL
Exception Handler 	 React 		 componentDidCatch 	 https://reactjs.org/docs/error-boundaries.html

JSX

You can have a single module that exports many React components.

Children passed to a custom component can be anything, as long as that component transforms them into something React can understand before rendering.

Some “falsy” values, such as the 0 number, are still rendered by React. To fix this, make sure that the expression before && is always boolean

Conversely, if you want a value like false, true, null, or undefined to appear in the output, you have to convert it to a string first

React

So if you're a new React developer who wants to do something out of the ordinary like, oh, I don't know, handle errors, then you'll need to learn this big old class-based API that you'll probably never see again in your life.

Progressively Enhanced Web Component

HTML

<multistep-form>

<form action="https://postman-echo.com/post" method="post">
	
<fieldset>
	<legend>Your Info</legend>
	<p>
	<label for="firstname">
		First Name: 
	</label>
	<input type="text" id="firstname" name="firstname">
	</p>
	<p>
	<label for="lastname">
		Last Name: 
	</label>
	<input type="text" id="lastname" name="lastname">
	</p>
	<p>
	<label for="email">
		Email: 
	</label>
	<input type="email" id="email" name="email">
	</p>
</fieldset>

<fieldset>
	<legend>Payment Info</legend>
	<p>
	<label for="ccnumber">
		Credit Card Number: 
	</label>
	<input type="text" id="ccnumber" name="ccnumber">
	</p>
	<p>
	<label for="ccv">
		CCV: 
	</label>
	<input type="text" id="ccv" name="ccv">
	</p>
	<p>
	<label for="expdate">
		Expiration Date: 
	</label>
	<input type="text" id="expdate" name="expdate">
	</p>
</fieldset>

<fieldset>
	<legend>Shipping Info</legend>
	<p>
	<label for="street">
		Street: 
	</label>
	<input type="text" id="street" name="street">
	</p>
	<p>
	<label for="City">
		City: 
	</label>
	<input type="text" id="city" name="city">
	</p>
	<p>
	<label for="state">
		State: 
	</label>
	<input type="text" id="state" name="state">
	</p>
	<p>
	<label for="postalcode">
		Postal Code: 
	</label>
	<input type="text" id="postalcode" name="postalcode">
	</p>
	<input type="submit">
</fieldset>

</form>
</multistep-form>

CSS

label {
	display: inline-block;
	width: 140px;
}

JavaScript

class MultistepForm extends HTMLElement {

	constructor() {

		super();

		const shadow = this.attachShadow({mode:'open'});

		this.totalSets = this.querySelectorAll('fieldset').length;
		this.current = 0;
		
		const wrapper = document.createElement('div');

		wrapper.innerHTML = `
		
		

		Previous 
		Step 1 of ${this.totalSets}
		Next 
		

		`;

		this.$nextButton = wrapper.querySelector('#nextButton');
		this.$prevButton = wrapper.querySelector('#prevButton');
	
		this.$currentSetNum = wrapper.querySelector('#currentSetNum');

		shadow.appendChild(wrapper);

	}
	
	connectedCallback() {
		this.$nextButton.addEventListener('click', e => this.nextSet(e));
		this.$prevButton.addEventListener('click', e => this.prevSet(e));
		this.$sets = this.querySelectorAll('fieldset');

		this.$sets.forEach(s => {
			s.style.display='none';
		});

		this.updateDisplay();
	}

	nextSet() {
		if(this.current+1 == this.totalSets) return; 
		this.current++;
		this.updateDisplay();
	}

	prevSet() {
		if(this.current == 0) return; 
		this.current--;
		this.updateDisplay();
	}

	updateDisplay() {
		this.$sets.forEach((s, x) => {
			if(x === this.current) this.$sets[x].style.display = 'block';
			else this.$sets[x].style.display = 'none';
		});
		this.$currentSetNum.innerText = this.current+1;
	}

}

customElements.define('multistep-form', MultistepForm);

MS Behaviors

XSLTForms

REFERENCES

Examples

Games

⚠️ **GitHub.com Fallback** ⚠️