How to add class to select2 element in v4.0

Question

This is very similar to this question on how to add class to select2 element, however the answers there appear to target earlier versions of the framework which has undergone so

Answer 1

You can use the following options to add a class to the container (selection) or dropdown (options):

$('.select2').select2({
    containerCssClass: "custom-container",
    dropdownCssClass: "custom-dropdown",
});

According to the Migration Guide in the 4.0 Announcement:

If you use the full build of Select2 (select2.full.js) compatibility modules will be used in some cases to ensure that your code still behaves how you were expecting.

According to the Configuration Docs, the following options can be passed:

However, Select2 isn't great about defining what a "container" is and where you'd expect to find it.

Here's a breakdown of some of high level html structures and where the custom classes show up:

Here's a running demo that outputs the custom classes to the container and dropdown wrappers and then uses them to style the color of each section (just to prove they're being inserted)

$('.select2').select2({
    containerCssClass: "custom-container",
    dropdownCssClass: "custom-dropdown",
});

select {
  width: 200px;
}

.custom-container span {
  color: blue!important;
}
.custom-dropdown {
  color: red;
}

  Algebra
  Alaska
  Arizona