Notice: Undefined index: HTTP_ACCEPT_LANGUAGE in /var/www/vhost/wpiece.com/home/html/comun/configuracion.php on line 24
Cloud Web Component example: Shadow Wrapper

Web Component Shadow Wrapper


The following web component allows you to make any desired content be inserted as Shadow DOM in our HTML page. It is a fast way to encapsulate widgets without having to fully develop a Web Component.

Shadow Wrapper allows you to insert the content of your component in monolithic way (all html, css and javascript together) or separately. This makes it possible to reuse the same component in different places by changing its appearance (css) and action (javascript). On this page you can see it in action!

Let's look at the quick way to use shadow wrapper with a monolithic component.

<!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>

Use examples

<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>

Adding styles

You can indicate an optional url (url-css) containing the styles to apply to your component. So you can adapt a component to different websites.

IMPORTANT: At the moment not all browsers correctly support css encapsulation (either by not fully supporting DOM shadow or the scoped option for styles in Html5, but shadow wrapper allows you to set a specific id for instantiated component, so you can create your specific stylesheet for that instance. Add the attribute data-id with the desired value.


<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>

Adding actions

You can also specify an optional url (url-js) containing the desired javascript actions. IMPORTANT: shadow wrapper creates an object with the wrapperContent identifier where the retrieved content (response from url-content) is encapsulated. Through it you can access via javascript to your component.