Technology Behind

2Shapes Player is built using a web components technology.

2Shapes Player is built using a web components technology. The main advantage for you of integrating third-party web components is the ability to leverage proven and widely used solutions, saving time and effort in development. In addition, they are technology agnostic, which means that they can be used flexibly in different types of projects and platforms. These pre-existing components can effectively and reliably enrich the functionality, look and feel of a website.

2Shapes Player can be integrated into any website, regardless of the technology used.

Understanding the Web components

Web components are a set of technologies that can be incredibly helpful for web designers when creating and maintaining websites and web applications. Here's an explanation in simpler terms:

1. Custom Elements: Think of these as special building blocks for web pages. Instead of only using standard HTML tags like <div> or <p>, custom elements allow you to create your own HTML tags. For example, you could make a custom <star-rating> tag to easily add star ratings to your site. This makes your code more organized and easier to understand.

2. Shadow DOM: Imagine having a secret room in a house where you can put all your stuff, and it won't mess up the rest of the house. The Shadow DOM does something similar for web components. It lets you hide the styles and behaviors of a custom element so they don't accidentally affect the rest of the page. It's like having a private space for each custom element.

3. HTML Templates: This is like a blueprint for your content. You can create a template for a part of your web page that you want to reuse. For instance, you can have a template for a product card, and then use it to show multiple products. Templates are like cookie cutters for web content.

4. HTML Imports (deprecated): Imagine you can borrow pieces of code from other web designers and use them in your project. That's what HTML Imports allowed you to do. But keep in mind that this feature is being phased out in favor of newer techniques like using JavaScript to manage imports.

Web designers often use web components to create consistent, reusable elements in their designs. For example, if you're designing an e-commerce website, you can build a custom <product-card> element that includes the product image, title, price, and a "buy" button. Then, you can use this element throughout your site for each product.

Web components help web designers keep their code neat and organized, making it easier to update and maintain websites. They also promote consistency in design and behavior, as you can ensure that all instances of a custom element look and work the same way.

While web components are beneficial, they may require some knowledge of web development to fully utilize. So, collaborating with web developers can be a great way to implement web components effectively in your design projects.