How to pass Webform elements from controller to custom twig template

Question

I'm pretty new to Drupal and probably this is simple but I got stuck with this.

What I'm trying to do: I have created a custom module where I have defined a custom route to display my webfrom in custom twig template.

How and what to return from Controller so my webform elements will be available in custom twig template.

my_module.module

/**
 * Implementation of hook_theme
 *
 * Since we have a lot to explain, we're going to use Twig to do it.
 */
function my_module_forms_theme($existing, $type, $theme, $path) {
  return [
    'my_template' => [
      'variables' => ['test_var' => NULL],
      'render element' => 'form'
    ],
  ];
}

my_module/src/Controller/MyModuleController.php

namespace Drupal\my_module\Controller;


use Drupal\Core\Controller\ControllerBase;

class MyModuleController extends ControllerBase {

public function content() {
    $my_form = \Drupal\webform\Entity\Webform::load('my_form_id');
    $form = \Drupal::entityManager()
      ->getViewBuilder('webform')
      ->view($my_form);

$build = [
  '#theme' => 'my_template',
  '#form' => $form,
];
return $build;


}
}

In my twig template, I want to be able to use form elements like below. Please let me know how to achive this.

my-template.html.twig

{{ form.element.name }}
{{ form.element.email }}

Thanks

Answer 1

my_module.module:

/**
 * Implementation of hook_theme
 *
 * Since we have a lot to explain, we're going to use Twig to do it.
 */
function my_module_forms_theme($existing, $type, $theme, $path) {
  return [
    'my_template' => [
      'template' => 'my-template',
      'variables' => ['form' => NULL],
    ],
  ];
}