@polymer/marked-element - npm Package Compare versions

Comparing version 1.2.0-pre.3 to 3.0.0-pre.1

package.json

 {
   "name": "@polymer/marked-element",
   "flat": true,
-  "version": "1.2.0-pre.3",
+  "version": "3.0.0-pre.1",
   "description": "Element wrapper for the marked library",
@@ -22,8 +22,7 @@ "contributors": [
   },
-  "license": "SEE LICENSE IN https://polymer.github.io/LICENSE.txt",
+  "license": "https://polymer.github.io/LICENSE.txt",
   "dependencies": {
-    "marked": "~0.3.3",
-    "@polymer/polymer": "preview"
+    "@polymer/polymer": "^3.0.0-pre.1"
   },
   "devDependencies": {}
 }

README.md

@@ -18,3 +18,3 @@
 
-##<marked-element>
+## <marked-element>
 
@@ -24,20 +24,22 @@ Element wrapper for the [marked](https://github.com/chjj/marked) library.
 `<marked-element>` accepts Markdown source, and renders it to a child
-element with the class `markdown-html`. This child element can be styled
+element with the slot `markdown-html`. This child element can be styled
 as you would a normal DOM element. If you do not provide a child element
-with the `markdown-html` class, the Markdown source will still be rendered,
+with the `markdown-html` slot, the Markdown source will still be rendered,
 but to a shadow DOM child that cannot be styled.
 
-The Markdown source can be specified either via the `markdown` attribute:
+The Markdown source can be specified several ways:
 
+### Use the `markdown` attribute to bind markdown
+
 ```html
 <marked-element markdown="`Markdown` is _awesome_!">
-  <div class="markdown-html"></div>
+  <div slot="markdown-html"></div>
 </marked-element>
 ```
 
-Or, you can provide it via a `<script type="text/markdown">` element child:
+### Use `<script type="text/markdown">` element child to inline markdown
 
 ```html
 <marked-element>
-  <div class="markdown-html"></div>
+  <div slot="markdown-html"></div>
   <script type="text/markdown">
@@ -58,20 +60,41 @@ Check out my markdown!
 
+### Use `<script type="text/markdown" src="URL">` element child to specify remote markdown
+
+```html
+<marked-element>
+  <div slot="markdown-html"></div>
+  <script type="text/markdown" src="../guidelines.md"></script>
+</marked-element>
+```
+
 Note that the `<script type="text/markdown">` approach is *static*. Changes to
 the script content will *not* update the rendered markdown!
 
+Though, you can data bind to the `src` attribute to change the markdown.
+
+```html
+<marked-element>
+  <div slot="markdown-html"></div>
+  <script type="text/markdown" src$="[[source]]"></script>
+</marked-element>
+...
+<script>
+  ...
+  this.source = '../guidelines.md';
+</script>
+```
+
 ### Styling
 
-If you are using a child with the `markdown-html` class, you can style it
+If you are using a child with the `markdown-html` slot, you can style it
 as you would a regular DOM element:
 
 ```css
-.markdown-html p {
+[slot="markdown-html"] p {
   color: red;
 }
 
-.markdown-html td:first-child {
+[slot="markdown-html"] td:first-child {
   padding-left: 24px;
 }
 ```
-
-

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

44033

increased by332.93%

Dependency count

1

decreased by-50%

Number of package files

19

increased by375%

Lines of code

316

increased byInfinity%

Number of lines in readme file

98

increased by30.67%

Dependency changes

• + Added@polymer/polymer@3.5.2(transitive)

• + Added@webcomponents/shadycss@1.11.2(transitive)

• - Removedmarked@~0.3.3

• - Removedmarked@0.3.19(transitive)

• Updated@polymer/polymer@^3.0.0-pre.1