Web Component Shadow Wrapper


El siguiente web component permite hacer que cualquier contenido deseado se inserte como Shadow DOM en nuestra página HTML. Es una forma rápida de encapsular widgets sin necesidad de desarrollar completamente un Web Component.

Shadow Wrapper te permite insertar el contenido de tu componente de forma monolítica (todo el html, css y javascript juntos) o bien por separado. Esto hace que puedas reutilizar un mismo componente en diferentes sitios cambiándo su apariencia (css) y comportamiento (javascript). ¡En esta misma página lo puedes ver en acción!

Veamos la forma rápida de usar shadow wrapper con un componente monolítico.

<!DOCTYPE html>
<html lang="en">
<head>
	<script src="https://www.wpiece.com/js/webcomponents.min.js"></script>
	<link  rel="import" href="http://wpiece.com/p/12_30" />
</head>

<body>
	<shadow-wrapper
		url-content="http://www.foo.com/component/your-html-component.html"></shadow-wrapper>
</body>
</html>

Ejemplos de uso

<body>
	<shadow-wrapper data-id="wrapper-one"
		url-content="http://www.foo.com/component/your-html-component.html"></shadow-wrapper>
		url-css="http://www.foo.com/component/your-css-component.html"></shadow-wrapper>

Añadiendo estilos

Puedes indicar una url opcional (url-css) que contenga los estilos a aplicar a tu componente. Así podrás adaptar un componente a diferentes sitios web.

IMPORTANTE: de momento no todos los navegadores soportan correctamente la encapsulación de css (ya sea por no soportar shadow DOM totalmente o la opción scoped para estilos de html5. Pero shadow wrapper te permite indicar un id específico para componentente instanciado. De esta forma podrás crear tu hoja de estilos específica para esa instancia. Añade el atributo data-id con el valor deseado.


<body>
	<shadow-wrapper data-id="wrapper-three"
		url-content="http://www.foo.com/component/your-html-component.html"></shadow-wrapper>
		url-css="http://www.foo.com/component/your-css-component.html"></shadow-wrapper>
		url-js="http://www.foo.com/component/your-js-component.html"></shadow-wrapper>

Añadiendo comportamiento

También puedes indicar una url opcional (url-js) que contenga el comportamiento javascript deseado. IMPORTANTE: shadow wrapper crea un objeto con el identificador wrapperContent donde está encapsulado el contenido recuperado de url-content. A través de el podrás acceder vía javascript a tu componente.