Prototype idea

front-page.php

<div class="utility_page-center">
  <?php
    component('slider', [
      // $args
      'cat' => '4',
      'posts_per_page' => '3'
    ], [
      // custom extra context
      'wrap_class' => 'orange_bg',
      'item_class' => 'slide'
    ]
  ); ?>
</div>

output.html

<!-- If CSS/JS libs were imported earlier, don't re-import them. -->

<style>.component_slider.orange_bg{background:orange;color:#fff}</style>

<div class="utility_page-center">
  <div class="component_slider orange_bg">
    <img class="component_slider-slide slide" src="1.jpg">
    <img class="component_slider-slide slide" src="2.jpg">
    <img class="component_slider-slide slide" src="3.jpg">
  </div>
</div>

<script>(function(){slider({slideSelector:'.slide'})})();</script>

slider.php

<style lang="scss" minify>
  @import '../variables/css/colors';
  
  .component_slider {
    width: 100%;
    height: 300px;

    &.orange_bg {
      background: $custom_orange;
      color: white;
    }
  }
</style>

<div class="component_slider <?= $wrap_selector; ?>">
  <?php $query = new WP_Query($args); ?>
  <?php if ($query->have_posts()) : ?>
    <?php while ($query->have_posts()) : ?>
      <?php $query->the_post(); ?>

      <img class="component_slider-slide <?= $item_class; ?>" src="<?= get_the_post_thumbnail(); ?>">

    <?php endwhile; ?>
  <?php endif; ?>
  <?php wp_reset_postdata(); ?>
</div>

<script lang="babel" presets="es2015 stage-0" minify>
  import slider from 'slider'

  slider({
    slideSelector: '.slide'
  })
</script>