Skip to content
This repository has been archived by the owner on Nov 3, 2021. It is now read-only.

BuildingBlocks as pseudo "Web Components" #13741

Closed
wants to merge 4 commits into from
Closed

BuildingBlocks as pseudo "Web Components" #13741

wants to merge 4 commits into from

Conversation

samjoch
Copy link
Contributor

@samjoch samjoch commented Nov 15, 2013

Note

  • BB CSS are not changed at all.
  • During build time bb- tags are replaced with their template.
  • For testing purpose i added bb-header and bb-subheader
  • No performance issue, because we don't really touch the app.
  • This is not working on desktop yet!

Structure

  • All web components are stored in shared/components
  • Each component can be stored in a separate file. eg: shared/components/header.html
  • Here how a component looks like:
<element name="bb-tagname" attrs="attr1,attr2,attr3">
  <template>
    <!-- Stuff here -->
    <!-- you can use <content></content> to append content of the component -->
    Hello {{attr1}}
    <content></content>
  </template>
</element>

Usage

<body>
  <bb-tagname attr1="val1">Hello World</bb-tagname>
</body>

How to create a component

Just create a new .html file in shared/components, using the structure describe above and that's it, you can use your component.

bb-tagname can be whatever you want but it needs a - somewhere.

We use handlebar for templating stuff. (more info here)

@mozilla-autolander-deprecated
Copy link
Contributor

This pull request has been closed due to tree stability issues. Please rebase and re-open the pull request if you still need to land this. Ensure the gaia-try run is green before landing. Sorry for any inconvenience.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
2 participants
@samjoch @mozilla-autolander-deprecated