GithubHelp home page GithubHelp logo

generator-polymer's Introduction

npm version npm downloads Build Status Dependency Status

Deprecation warning

We encourage you to take a look at Polymer CLI which contains many of the same features as this generator and has a larger team supporting it. We plan to deprecate and eventually remove this project from GitHub and direct all future support toward Polymer CLI. The good news is it uses Yeoman under the hood so I'll see you there!

Yeoman generator for Polymer projects

Introduction

Polymer is a library of polyfills and sugar which enable the use of Web Components in modern browsers. The project allows developers to build apps using the platform of tomorrow and inform the W3C of places where in-flight specifications can be further improved.

generator-polymer provides Polymer scaffolding using Yeoman (a scaffolding tool for the web), letting you easily create and customize Polymer (custom) elements via the command-line and import them using HTML Imports. This saves you time writing boilerplate code so you can start writing up the logic to your components straight away.

Features

Issues

This generator clones Polymer Starter Kit and seed-element. If you're having issues with the template files generated for those projects, please raise them on those repos as they are the canonical source.

Installation

Install the generator npm install -g generator-polymer

Make a new directory and cd into it mkdir -p my-project && cd $_

Scaffold a new Polymer project: yo polymer

Generators

Available generators:

Note: Generators are to be run from the root of your app

App

Sets up a new Polymer app, generating all the boilerplate you need to get started.

Example:

yo polymer

Element (alias: El)

Generates a polymer element in app/elements and optionally appends an import to app/elements/elements.html.

Example:

yo polymer:element my-element

# or use the alias

yo polymer:el my-element

Note: You must pass in an element name, and the name must contain a dash "-"

One can also include element dependencies to be imported. For instance, if you're creating a fancy-menu element which needs to import paper-button and paper-checkbox as dependencies, you can generate the file like so:

yo polymer:el fancy-menu paper-button paper-checkbox

Options

--docs, include iron-component-page docs with your element and demo.html
--path, override default directory structure, ex: --path foo/bar will put your element in app/elements/foo/bar

Seed

Generates a reusable polymer element based on the seed-element workflow. This should only be used if you're creating a standalone element repo that you intend to share with others via bower. If you're just building a Polymer app, stick to the Element generator.

To preview your new element you'll want to use the polyserve tool.

Example:

mkdir -p my-foo && cd $_
yo polymer:seed my-foo
polyserve

Gh

Generates a Github pages branch for your seed-element.

This requires that you have SSH keys setup on GitHub.

Windows users will need to have Git Bash installed

If your documentation or demo pages have dependencies declared as devDependencies in bower.json, they will be included in your GitHub pages branch.

Example:

cd my-foo
yo polymer:gh

If, for some reason, you don't want the devDependencies, use the --nodevdeps option.

Github Enterprise

Github Enterprise instances require a custom hostname to be defined. Use the --hostname option.

Example:

cd my-foo
yo polymer:gh --hostname custom.host.com

Testing

The project generated by yo polymer contains support for web-component-tester. The following commands are included:

Run local tests (in terminal):

gulp test:local

Run remote tests with SauceLabs:

gulp test:remote

See the web-component-tester readme for configuration options.

Gotchas

The elements.html file

The app generator will produce an elements.html file where you can place your imports. This file will be vulcanized when you run the default gulp task. You'll want to make sure that elements.html is the only import in your index.html file, otherwise there's a good chance you'll accidentally load Polymer twice and break the app.

Contribute

See the contributing docs

When submitting an issue, please follow the guidelines. Especially important is to make sure Yeoman is up-to-date, and providing the command or commands that cause the issue.

License

BSD license

generator-polymer's People

Contributors

addyosmani avatar andybons avatar appleboy avatar arthurvr avatar beriberikix avatar cvrebert avatar davej avatar eddiemonge avatar germ13 avatar hegdeashwin avatar hemanth avatar jshcrowthe avatar kevva avatar luxedo avatar masteram avatar moderndeveloperllc avatar msteward avatar passy avatar peterblazejewicz avatar ragingwind avatar robdodson avatar samccone avatar silenthoo avatar sindresorhus avatar timblack1 avatar toadkicker avatar tony19 avatar vandeurenglenn avatar wibblymat avatar wyze avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

generator-polymer's Issues

"bower install" hangs when run inside projects generated with generator-polymer

Steps to reproduce:

  1. Run "yo polymer" and generate a Polymer app with default settings.
  2. Try to install a new component with Bower (e.g. bower install --save Polymer/core-firebase). This will hang forever.
  3. Stop the process, cd to the parent directory and try Step 2 again. This time it will work.

(npm v1.4.9, bower v1.3.3, Mac OS X 10.9.3)

Ubuntu: Generator is exiting with Node error var cwd = process.cwd();

I am working on Ubuntu 14.04LTS with Node v0.10.25, npm v1.3.10, yeoman v1.1.2, and generator-polymer v0.2.2.

Running the generator-polymer after the yo command exits with the following Node error:

node.js:811
    var cwd = process.cwd();
                      ^
Error: ENOENT, no such file or directory
    at Function.startup.resolveArgv0 (node.js:811:23)
    at startup (node.js:58:13)
    at node.js:902:3

Googling the error will get you here:
foreversd/forever#200

Here is a dump of my console:

stat30fbliss@rob-UbuntuPad:~/Dropbox/Workbench$ mkdir polymer && cd polymer
stat30fbliss@rob-UbuntuPad:~/Dropbox/Workbench/polymer$ yo
[?] What would you like to do? Run the Polymer generator (0.2.2)

Make sure you're in the directory you want to scaffold into.
This generator can also be run with: yo polymer

     _-----_
    |       |    .--------------------------.
    |--(o)--|    | Out of the box I include |
   `---------´   |        the Polymer       |
    ( _´U`_ )    |       seed-element.      |
    /___A___\    '--------------------------'
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 

[?] What is your GitHub username? stat30fbliss
[?] What is your element's name: polymer
   create .gitignore
   create .gitattributes
   create .bowerrc
   create bower.json
   create .jshintrc
   create .editorconfig
   create polymer.css
   create polymer.html
   create index.html
   create demo.html
   create README.md


I'm all done. Running bower install for you to install the required dependencies. If this fails, try running the command yourself.


bower cached        git://github.com/Polymer/polymer.git#0.3.3
bower validate      0.3.3 against git://github.com/Polymer/polymer.git#~0.3.1
bower cached        git://github.com/Polymer/polymer.git#0.3.3
bower validate      0.3.3 against git://github.com/Polymer/polymer.git#>=0.3.0 <1.0.0
bower install       polymer#0.3.3

polymer#0.3.3 
├── core-component-page#0.3.3
└── platform#0.3.3

Bye from us! Chat soon.

            Addy Osmani
          Sindre Sorhus
        Brian Ford
     Eric Bidelman
              Paul Irish
     Mickael Daniel
          Pasca1 Hartig
      Stephen S.wchuk
    Frederick R0s

stat30fbliss@rob-UbuntuPad:~/Dropbox/Workbench/polymer$ 
node.js:811
    var cwd = process.cwd();
                      ^
Error: ENOENT, no such file or directory
    at Function.startup.resolveArgv0 (node.js:811:23)
    at startup (node.js:58:13)
    at node.js:902:3

Here is a screenshot of my directory after the generator fails:
Folder Screenshot

All of the files are populated. The only listing in bower.json is polymer:

{
  "name": "polymer",
  "version": "0.0.0",
  "keywords": "seed, polymer, web-components",
  "main": "polymer.html",
  "dependencies": {
    "polymer": "Polymer/polymer#~0.3.1"
  }
}

Let me know if I can provide any more details.

Bower overwriting the component directory

Following the discussion here I have started using the suggested structure and used ../ as bower installation directory. But now I have two components, A and B, where B has A as bower dependency. So now every time I run bower install in B, bower overwrites A directory, as also discussed in bower forum (but the issue was abandoned for a while). Am I doing anything wrong? How everybody else using generator-polymer is dealing with this problem?

prepend '-element'

Hi folks,

the generator today creates something like mytag + '-element'

I get why as people might try to create a button element and elements need the '-' as part of the tag. In my case this behaviour would be kind of annoying as all my components are prefixed with my companies/projects shorthand e.g. xyz-button. Which now results in xyz-button-element.

Are there any opinions about prepending vs appending an element in general?
Should that be an option - prepend: 'xyz', append: ''

Regards

generator-mocha step fails during Polymer project initialize

yo 1.0.5
node 10.22
npm 1.3.14

/usr/local/lib/node_modules/generator-mocha/app/index.js:7
  this.option('assert-framework', {
       ^
TypeError: Object [object Object] has no method 'option'
    at new module.exports (/usr/local/lib/node_modules/generator-mocha/app/index.js:7:8)
    at Environment.create (/usr/local/lib/node_modules/yo/node_modules/yeoman-generator/lib/env/index.js:325:10)
    at Generator.invoke (/usr/local/lib/node_modules/generator-polymer/node_modules/yeoman-generator/lib/actions/invoke.js:18:28)
    at /usr/local/lib/node_modules/generator-polymer/node_modules/yeoman-generator/lib/base.js:351:12
    at /usr/local/lib/node_modules/generator-polymer/node_modules/yeoman-generator/node_modules/async/lib/async.js:548:21
    at /usr/local/lib/node_modules/generator-polymer/node_modules/yeoman-generator/node_modules/async/lib/async.js:224:13
    at iterate (/usr/local/lib/node_modules/generator-polymer/node_modules/yeoman-generator/node_modules/async/lib/async.js:131:13)
    at async.eachSeries (/usr/local/lib/node_modules/generator-polymer/node_modules/yeoman-generator/node_modules/async/lib/async.js:147:9)
    at _asyncMap (/usr/local/lib/node_modules/generator-polymer/node_modules/yeoman-generator/node_modules/async/lib/async.js:223:9)
    at Object.mapSeries (/usr/local/lib/node_modules/generator-polymer/node_modules/yeoman-generator/node_modules/async/lib/async.js:213:23)

Implement workflow from design doc

PROPOSED WORKFLOW

$ yo polymer

$ > What prefixed name would you like to call your new element?
Carousel

(we should normalize the name and lowercase it accordingly)

$ > Would you like some extra boilerplate code included? Y/N
Y
<polymer-element name="carousel-element">
  <template>
    <span>I'm <b>carousel-element</b>. This is my Shadow DOM.</span>
  </template>
  <script>
    Polymer('carousel-element');
  </script>
</polymer-element>

We then automatically scaffold out your element, write an index.html file including it via HTML imports and pull in Polymer (and any related files) using Bower. That's the start.

If you want to go create another element using the same project (e.g a calendar), you can just run:

$ yo polymer:element calendar
<polymer-element name="calendar-element" constructor="CalendarElement" attributes="">
  <template>
    <style>
      @host { :scope {display: block;} }
    </style>
    <span>I'm <b>calendar-element</b>. This is my Shadow DOM.</span>
  </template>
  <script>
    Polymer('calendar-element', {

      //applyAuthorStyles: true,
      ready: function() { },
      inserted: function() { },
      removed: function() { },
      attributeChanged: function() { }

    });
  </script>
</polymer-element>
$ > What prefixed name would you like to call your new element?
etc.

$ > Would you like to include Polymer() has an external script rather than inlining it?
Y

Additional prompts

$ > List public methods/property names you would like to publish on the element?
Y

$ > Would you like to include constructor=””?
Y

Constructor-like setup with ready

<polymer-element name="my-element" constructor="MyElement">
  <template>
    This is a <b>my-element</b> with a ready() method.
    <span id="readyEl">Not ready...</span>
  </template>
  <script>
    Polymer('my-element', {
      owner: "Daniel",
      ready: function() {
        this.$.readyEl.innerText = this.owner + " is ready!";
      }
    });
  </script>
</polymer-element>
$ > Would you like to include any other elements in this element?
Y

$ > Which elements would you like to include? (space separate with paths)
polymer-list polymer-button
<link rel="import" href="polymer-list.html">
<link rel="import" href="polymer-button.html">

Build support

If we are interested in building, testing and LiveReload we might also want to implement support for

grunt server
grunt test
grunt / grunt build

class="no-js"

Is class="no-js" needed on the html tag in index.html? I don't see it being used anywhere...

htmlmin not working

The htmlmin task in the Gruntfile.js only produces expanded html by default, which is essentially not minified. I would imagine that this was a mistake and that the htmlmin task should be set to expand: false and the options that have been commented out should be added back in?

'dist/build.html' missing for vulcanize task?

$ yo polymer:element x
[?] What more would you like? 
[?] Import local elements into this one? (e.g "a.html b.html" or leave blank) 
[?] Import installed Bower elements? (e.g "polymer-ajax" or leave blank) 
   create app/elements/time.html
$ grunt
Running "jshint:all" (jshint) task

✔ No problems


Running "clean:dist" (clean) task

Running "vulcanize:default" (vulcanize) task
Warning: ENOENT, no such file or directory 'dist/build.html' Use --force to continue.
Error: ENOENT, no such file or directory 'dist/build.html'
    at Object.fs.openSync (fs.js:427:18)
    at Object.fs.writeFileSync (fs.js:966:15)
    at Object.handleMainDocument [as processDocument] (/Users/hemanth/labs/x-time/node_modules/grunt-vulcanize/node_modules/vulcanize/lib/vulcan.js:336:6)
    at /Users/hemanth/labs/x/node_modules/grunt-vulcanize/tasks/vulcanize.js:46:19
    at Array.forEach (native)
    at Object.<anonymous> (/Users/hemanth/labs/x-time/node_modules/grunt-vulcanize/tasks/vulcanize.js:29:16)
    at Object.<anonymous> (/Users/hemanth/labs/x-time/node_modules/grunt/lib/grunt/task.js:264:15)
    at Object.thisTask.fn (/Users/hemanth/labs/x-time/node_modules/grunt/lib/grunt/task.js:82:16)
    at Object.<anonymous> (/Users/hemanth/labs/x-time/node_modules/grunt/lib/util/task.js:296:30)
    at Task.runTaskFn (/Users/hemanth/labs/x-time/node_modules/grunt/lib/util/task.js:246:24)

Aborted due to warnings.

After grunt -f the rest of the grunt runs went well.

Sass support

  • External CSS/SCSS files for :app generator
  • External CSS/SCSS files for :el generator
  • Watch/Serve should preview SCSS properly
  • Watch/Serve should preview CSS properly

box-sizing: border-box

To keep the generator-polymer in sync with the Google Web Starter Kit, and to follow best practices, would it be good to add the box-sizing: border-box setup to the general stylesheet (CSS/Sass) and/or to the yo polymer:el template in place of display: block as is currently being used?

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Failed to execute error

The generator works as expected until yeoman runs bower install where it throws an error:
screen shot 2014-07-01 at 1 07 50 pm

I have tried manually running bower install and the same error occurs. All of my other yeoman generators are working so it seems to be an issue with this generator or with the repo's listed in the bower dependencies of this generator. Any thoughts or solutions?

Also, how do generator-polymer, and generator-element relate to each other? Should I use generator-polymer to scaffold out the initial project and then generator-element to create individual elements inside it? Does generator-polymer setup a recommended structure for how and where web components should be placed and how they should be used?

Sorry for so many questions; I am new to web components / Polymer and would like to make sure that I am following the most recent best practices for project setup.

Thank you.

running yo polymer creates directories outside of the directory you ran the command

I am not entirely sure what this generator is supposed to do, because according to the article at http://www.html5rocks.com/en/tutorials/webcomponents/yeoman/ the next thing to do after running yo polymer is to run grunt server.

HOWEVER, there is no gruntfile, and no directories within the directory I ran yo polymer in.

.bowerrc has a ../ as its directory, which causes bower to install components in the level above the directory I have just entered.

`grunt serve:dist` yields broken page

Just after using yo polymer to generate a project, running grunt serve:dist to view the generated output fails with:

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9000/bower_components/platform/platform.js

Either not enough is getting copied, or the default vulcanize options aren't inlining enough.

Bug when creating elements with multiple dashes

At present gangnam-style when passed as a name for an element to a prompt will cause the elements to be created correctly, but will name the component 'gangnameStyle' within the import for some strange reason. Probably CCing where it should not.

We need to fix this otherwise naming will have constraints.

`grunt test` task not working out of the box

After running yo polymer, the default grunt test task does not work. It outputs the following error:

Running "mocha:all" (mocha) task
Testing: http://localhost:9000/index.html

Warning: PhantomJS timed out, possibly due to a missing Mocha run() call. Use --force to continue.

Aborted due to warnings.

`polymer:gh` does not include webcomponents in the devDependencies

After running yo polymer:gh, webcomponents in the devDependencies are not included.

I configure 3rd-party webcomponents(ex. github-ribbon) in bower devDependencies for using it in my documentation page.

$ bower install github-ribbon --save-dev

<!-- demo.html -->
<link rel="import" href="../github-ribbon/src/github-ribbon.html">
...
<github-ribbon user="ragiragi" repo="my-polymer-rating" color="orange" position="right"></github-ribbon>

then when I run polymer generator to seed github-pages, I can't find any dev-deps in the gh-pages branch.

How can I fix it?

Upgrade bootstrap-sass to version 3.0.0

Currently, generator-polymer is using bootstrap-sass version ~2.3.0 (see app/templates/_bower.json at line 5).

That would be great to upgrade to bootstrap-sass version 3.0.0, which is based on Bootstrap 3.0.0. It ships with new features which would be appreciated.

Another option, instead of having to maintain the sass-bootstrap version, would be to use "latest" as version number. But that would raise new issues on the generator-polymer project side, as it would eventually require some modifications in the HTML code on every major updates of bootstrap-sass.

P.S.: I'm using latest Yo as per guidelines for contributing document.

Autoprefixer added to build tool

To further match Google's Web Starter Kit (and because it is freakin' awesome), would it make sense to add Autoprefixer to the Grunt/Gulp tasks, with Polymer's supported browsers listed in options.browsers?

index.html template should auto fill 'title'

Not critical, but a very simple fix that would be nice...
The index.html yeoman template could auto fill 'title' in the same way that it the package.json "name" value is filled, rather than being set to Polymer WebApp out of the box. This could be derived from the repo name (possibly using ._.humanize or something...):
yeoman/generator-angular#765

gp.sh nukes the gh-pages branch history

gp.sh is really destructive — it essentially clones the master branch, does some manipulations, creates a brand-new orphan gh-pages branch and then force-pushes it back up. This prevents gh-pages from ever having a commit history.

It may be worth reevaluating how it does this at some point.

Make auto-import stuff optional

Not every element needs to be imported in elements.html. For example, if I make a chat-app element, it may import all of its children, so including those imports again in elements.html is redundant.

Running yo polymer:el should ask if the user would like an import generated for them

yo polymer:el creates wrong import path to Polymer

The html files that are created with yo polymer:el have the wrong path listed on the HTML import for polymer.html. They need to point up one more directory (ie ../).

They currently use:
<link rel="import" href="../bower_components/polymer/polymer.html">
But they should be the following with the new folder-per-component structure:
<link rel="import" href="../../bower_components/polymer/polymer.html">

Generated htmlmin task produces confusing, redundant index.html

The default output of yo polymer includes a vulcanize task that generates build.html, and an htmlmin task that copies over index.html. The compiled application definitely doesn't need both, and I was confused when I redirected the vulcanize output to index.html and it got overwritten by the htmlmin output.

Out of the box, Polymer doesn't install correctly

Rather, we don't install the correct package since they updated and the minified build we used to get is no longer there. This needs to be fixed otherwise scaffolding won't actually get you what you need.

Deploy on Github pages not working

When I run yo polymer:gh I get two errors during the script execution:
gp.sh: 16: gp.sh: pushd: not found at the beginning
and

gp.sh: 34: gp.sh: popd: not found

child process exited with code 127

at the end.

I'm on Ubuntu 14.04, I usually use zsh as default but I've tryed bash as well without success.

If I run e.g. pushd . directly, the command works.

polymer:element generator produces invalid element names

Following the instructions in the README, the button and panel elements get created without -element, which apparently breaks polymer.

Results in the following error:
Uncaught Error: document.registerElement: first argument ('name') must contain a dash ('-'). Argument provided was 'button'.

EDIT: this is in Chrome Version 34.0.1847.116

Sync with Web Starter Kit

From Rob Dodson's request to create a ticket on a recent Twitter conversation:


To match/sync with the setup of Google's Web Starter Kit and with what Addy Osmani has been talking about (creating a "flavor" of the Web Starter Kit with Polymer/Web Components baked in), I would love to see/help with a few changes with this generator:

Recommended updates to generator-polymer

  • Sass support / examples of using shared variables/mixins/placeholders inside of this new web component culture. Maybe also needed external links for JavaScript files and CSS files inside of each element-name.html file generated with yo polymer:el element-name?
  • BrowserSync rather than LiveReload.
  • Automatic living style guide / pattern library.
  • PageSpeed insights.
  • Consistent config files/settings, like: .jshintrc, .editorconfig etc.

P.S.

I just want to let the Polymer team know that you are amazing! Me and a few other developers at my company are working hard to adopt and push Web Components and Polymer to our fellow developers; all of your trainings/talks, hard work, updates, tools, and kindness is much appreciated. You are doing amazing work that is changing the development world.

Please let me know if you need my help with anything. I don't mean to just bring up issues here, but would like to contribute and evangelize Polymer and Web Components with my fellow developers ;)

`concat` and `uglify` listed as tasks, but are not being used.

In the Gruntfile.js, concat and uglify listed as tasks, but are not being used. I guess they aren't really needed with Vulcanize, but can Vulcanize concatenate and uglify scripts and CSS for performance? If not, should these be added as part of the serve/watch and build tasks in the Gruntfile?

A couple of small changes

  • class="no-js" on tag. Since the class is not actually being used, can it be removed?
  • In the .jshintrc, indent is set to 4; however, in the .editorconfig, the indent is set to 2. Should these be the same? Matching the .jshintrc in the Web Starter Kit might make sense, in my opinion...
  • In .jshintrc, strict is set to true; however, strict mode is not being used in the example yo-list.html and yo-greeting.html, so my linters are throwing errors. Should use strict; be added to the examples and el subgenerator?
  • In .jshintrc, the only global variable listed is "wrap", so the instances of Polymer are showing up as errors in my linter. Should Polymer be added to the list of variables in .jshintrc? Or does this mean that "newcap": false should be used?

generator-polymer scaffolding process seems to be broken

I just intalled generator-polymer in Ubuntu 13 (npm install -g generator-polymer) and when I try to generate a new project (yo polymer) it throws an error: You don't seem to have a generator with the name polymer installed. I also reinstall yeoman but it does not solve the problem. In fact the generator does not appear in the list of installed generators when i run yo --help.

Cut a new release

@robdodson Thanks for all your awesome work updating the generator. I think one thing we should do next is work towards tagging and pushing a new release. Could you check to make sure there are no further changes you feel need to be made to the readme before we go ahead?

idea: create css file for template and link it

create a css file with host and scope rules named something like style/my-element.css

and in the created template include a link to css file

<template>
  <link rel="stylesheet" href="styles/my-element.css" />
...

maybe as an option also create sass file?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.