If you just want to be able to separate your web elements into separate files and easily inport them into your project, you probably don't need a heavy WebComponent polyfill. Give this a shot.

Using this tool is simple. Create a template element either inline or in it's own separate html document(requires a compilation step). Give that template an id. Use that id as a class for another element in your project. lazywc will replace the classed element with the contents of the template during runtime.

This is a simple tool to make my life easier, maybe it can work for you too.

This library requires you to do one of two things. Either you must import 'package:lazywc/lazywc.dart' into your main dart file and run 'assemble()', or you'll have to import 'packages/lazywc/lazywc.js' into the bottom of your html page.