Requirejs inside web components

Summary:

The data-main attribute doesn’t work. You have to require manually.

 

This does NOT work:


<element name="vs-text">
   <link rel="stylesheet" href="vs-text.css">

   <template>
     <div class="main"></div>
   </template>

   <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.11/require.min.js</span>" data-main="main"></script>

   <script src="vs-text.min.js"></script>
 </element> 

 

This works:

<element name="vs-text">
<link rel="stylesheet" href="vs-text.css">

<template>
<div class="main"></div>
</template>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.11/require.min.js</span>"></script>
<script type="text/javascript">
require([], function() {
console.log('require');
});
</script>

<script src="vs-text.min.js"></script>
</element>

 

Standard