I work on a Symfony 3 app which uses Twig for rendering. To make the code more readable and reusable, I need to split a screen in small parts, parts which could be used in other screens (for example a clock widget). At first it seems easy, I could use the include Twig method to include that part of code. The problem is that my clock uses some specific CSS and JS scripts to work.
What would be the best way to create a reusable components composed of HTML, CSS and JS ? Thx in advance !
There is no "Component" concept or approach in Twig, but still you can encapsulate CSS + HTML + JS code in one file and include it as an isolate piece of code:
<style>...</style> {# or use <link href="..."> #}
<div>...</div>
<script>...<script> {# or use <script src="..."> #}
However, probably Twig is not the correct tool to achieve it and you should look at some frontend framework (e.g. VueJS https://v2.vuejs.org/v2/guide/index.html) by passing the data through HTML attributes.
Probably you can use include passing your data to a specific partial component and render it dinamically.
Check it : https://twig.symfony.com/doc/3.x/tags/include.html
